• 0

CSS formatting


Question

Hey guys, I've always hated front end design of web sites. I've always loved the back end logic. But I figured it would really help to master it and I have to say I love WPF positioning a heck of a lot more then div positioning. Is there a book out there that provides good examples on how to format divs to get the display you want? The data part is fine but like for example I just want to have one div box float:left and then another div float:right and always hug the right side of the container div. Well the right div just floats to the right as much as the left div takes up space. It never truly "floats" right and hugs the right side of the parent div, which I want it to do. I'm good with back-end logic and C# desktop apps and such. I've just always hated trying to work with divs. It takes WAY too much time then it should. Hopefully that'll improve after reading a book on it.

Link to comment
https://www.neowin.net/forum/topic/1156024-css-formatting/
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Well the front end stuff requires a logical mind too and there are always more than one way to achieve a single thing. I'd say that the best way to learn is to do what I did. Lots of trial and error! Lot's a googling too - you end up at places like stack overflow and w3 schools and more often than know someones usually asked the same question as you have!

Either way, best of luck in your learning :)

Edit: You mention reading a book - I'd personally go through the W3schools tutorials as you can put things into practice as you go along!

  • 0

Ok thanks. Well I know the basics of CSS formatting. I just don't know the tricks to get it to float right and hug the side. That is the main thing at the moment I'm trying to learn (without using gimmicky javascript to achieve it I technically could use jQuery to apply resizing to get what I want but I don't want to cheat). But there are many things like that I could learn that would be useful.

  • 0

css is very powerful but there's a lot of non-optimal ways of doing stuff out there. once you dig through enough google results you'll get a sense of which tutorial/article is higher quality than others.

nothing wrong with googling the end result you want to achive and seeing how different people arrive at that result, that's probably the more effective way of learning the less commonly used CSS properties/selectors/etc

  • 0

<div id="xGSListItmDefDiv" style="margin-bottom:5px;">
        <div id="xHdrDiv">
            <div id="xGSTitleDiv">
                @Html.Raw(gsDef.GarageSaleName)
            </div>
            <div id="xGSDistDiv">
                @Html.Raw(string.Format("{0:0.00sDef.GarageSaleDistance)) mi
            </div>
            <div id="xGSUNameDiv">
                @Html.ActionLink(gsDef.GarageSaleUserName, @UrlHelper.GenerateContentUrl(string.Format("/GetUserProfile/{0}", gsDef.GarageSaleUserId), this.Context))
            </div>
            <div id="xGSTagsDiv">
                Tags (ex. Starwars, Legos, Picklage, Test 1, Test 2, Test 3, Other)
            </div>
            <div id="xGSAddBtnDiv">
                <input id="xAddGSBtn_@Html.Raw(gsDef.GarageSaleId)" type="button" value="Add" />
            </div>
            <div id="xGSRatingDiv">
                * * * * *
            </div>
        </div>
        <div id="xGSBodyDiv">
            <div id="xGSDescDiv">
                Description: @Html.Raw(gsDef.GarageSaleShortDesc)
            </div>
            <div id="xGSAddrOptDiv">
                <div id="xGSAddrDiv">
                    @Html.Raw(string.Format("{0}<br;{1}, {2} {3}", gsDef.GarageSaleStreet, gsDef.GarageSaleCity, gsDef.GarageSaleStateCode, gsDef.GarageSaleZipCode))
                &lt;/div&gt;
                &lt;div id="xGSAddrIfoOptsDiv"&gt;
                    &lt;a href="#" data-id="@Html.Raw(gsDef.GarageSaleId)" data-lat="@gsDef.GarageSaleCoordsLat" data-lng="@gsDef.GarageSaleCoordsLong"&gt;Focus on @Html.Raw(gsDef.GarageSaleName)</a>;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="cDiv"&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS

#xGSListItmDefDiv
{
    width:955px;
    background-color:#CCCCCC;
}

#xGSTitleDiv
{
    min-width:35%;
    max-width:45%;
    float:left;
    margin-right:8px;
}

#xGSDistDiv
{
    float:left;
    margin-right:10px;
    max-width:60px;
    min-width:45px;
}

#xGSUNameDiv
{
    float:left;
    margin-right:8px;
}

#xGSTagsDiv
{
    float:left;
    margin-right:10px;
}

#xGSRatingDiv
{
    float: right;
    max-width:100px;
    margin-right:8px;
}

#xGSAddBtnDiv
{
    float:right;
    max-width:50px;
}

#xGSBodyDiv
{
    display:table-cell;
    width:100%;
}

#xGSDescDiv
{
    float:left;
    width:60%;
}

#xGSAddrOptDiv
{
    float:right;
    width:40%;
}

#xGSAddrDiv
{
    display:inline-block;
    float:right;
    min-width:350px;
    vertical-align:top;
    text-align:left;
}

xGSAddrIfoOptsDiv
{
    display:inline-block;
    float:right;
}

I'm trying to make the address div float to the right and huge the side. However it just sits next to the description div and only extends as far as the left div does :( I've even tried setting percentages for widths because I want the layout to be fluid.

  • 0

Apparently it has to do with the fact I'm setting the xGSBody as table-cell. But I have to do that to get the vertical alignment to top on the text so I don't know what my options are there. I mean it's 2013 we really should have a simple valign:top option at this point and have it float with the way the industry is shifting towards tablets things should naturally expand unless specified otherwise. Not sure what the resolution is though.

  • 0

Something like this?

http://jsfiddle.net/r8tUK/2/

  On 01/06/2013 at 19:38, ACTIONpack said:

You should be using Class and not ID

depends on what's the content, if you submit content you have to use ids in most cases since js, php, asp etc work easier with ids then classes as example js hasn't a document class function but it has a id function (class exists but that works only in modern browsers so not ie8 and lower which makes it troublesome).

  • 0
  On 01/06/2013 at 20:56, fobban said:

Look up css3 flexbox, it makes layouts much easier. Of course it won't work very well with any version of IE (IE10 supports a quite old draft).

One of the easiest way to get good layouts that is cross-browser might be to use an existing framework, e.g. Twitter bootstrap.

yeah flexbox is also a good idea but it would require a jquery/js fallback for IE indeed ^^

So that's why i used inline-box which works even in IE8

  • 0
  On 01/06/2013 at 16:14, sathenzar said:

Hey guys, I've always hated front end design of web sites. I've always loved the back end logic.

If you like logical things, you should try lessCSS - it brings a little bit of logic into CSS, making it quicker to write lots of CSS code.

  • 0
  On 02/06/2013 at 11:14, AndroidOS said:

If you like logical things, you should try lessCSS - it brings a little bit of logic into CSS, making it quicker to write lots of CSS code.

Yeah I love less myself too but it doesn't support calculations like:

width: (total.parent.width - total.previous.child.width);

If that becomes possible in less I'll be the happiest guy on earth :D

But less is indeed very great with support for variables and threading and simple calculations.

This topic is now closed to further replies.
  • Posts

    • Then why didn't Apple upstream their feature?
    • Unix is in fact not open source.
    • Microsoft Weekly: a new Surface, big Windows 11 feature update, and more by Taras Buria Image: terski on Pixabay This week's news recap is here with big Windows 11 updates, more apps rejecting Windows Recall, browser updates, welcome pricing changes for Xbox games, a single Windows 11 preview build, and other stories. Quick links: Windows 10 and 11 Windows Insider Program Updates are available Reviews are in Gaming news Great deals to check Windows 11 and Windows 10 Here, we talk about everything happening around Microsoft's latest operating system in the Stable channel and preview builds: new features, removed features, controversies, bugs, interesting findings, and more. And, of course, you may find a word or two about older versions. July 2025 non-security updates for Windows 10 and 11 are here, and they bring a pretty hefty list of various changes and new features. Windows 10 received KB5062649, while Windows 11 versions 22H2 and 23H2 got KB5062663 with fixes for file systems, input, networking, printing, and more. The biggest changelog has Windows 11 version 24H2 and its KB5062660 update. It brings a handful of new AI-powered features, Settings improvements, a redesigned BSOD with Quick Machine Recovery, and a lot more. Speaking of AI-powered features, more and more companies turn their backs on Windows Recall, Windows 11's flagship AI thingy. Brave and AdGuard announced that they will block Windows Recall because the feature itself is unsettling, and Microsoft's privacy efforts are not enough. Microsoft is working on a new tool that can help you upgrade from your old computer to a new one. The app can transfer not only settings but also files. In a newly published support document, Microsoft explained how the recently discovered experience works. In this article, we take a closer look at what is coming soon. We also published a big article that explained everything you need to know about the end of Windows 10 support. If you are a Windows 10 user, check it out here to prepare for the inevitable. If your Windows 10 exodus strategy is to switch to Linux, you may find this app useful. It can transfer important data from Windows 10 to Linux. By the way, Windows 10 is not the only Windows version to lose support on October 14. Certain Windows 11 versions will also reach the end of life on that fateful day. Another useful guide that we published this week explains how to disable reserved storage to free some space on your computer. Finally, check out this article detailing Windows Sandbox, a highly underrated feature, and an overview of 10 Windows 10 features that promised a lot but failed to take off. Windows Insider Program Here is what Microsoft released for Windows Insiders this week: Builds Canary Channel Build 27909 Nothing major in this build. The update only adds a couple of fixes here and there. Dev Channel Nothing in the Dev Channel this week Beta Channel Nothing in the Beta Channel this week Release Preview Channel Nothing in the Release Preview this week Recent Windows 11 preview builds were found to contain a welcome audio feature that allows sharing audio to several devices. Just open Quick Settings, click Shared Audio, and select the devices you need. Microsoft has not announced it yet, so stay tuned for official details. Also, Microsoft wants to improve Windows 11 with a new system that detects performance slowdowns and sends diagnostic data to the company. This system is now available in the latest Windows 11 preview builds. For Phone Link users with Android smartphones, Microsoft released some useful updates. The Link to Windows app now has remote controls, allowing you to lock your PC, send files, or mirror your phone's screen. There is also a redesigned UI and a better onboarding experience. Finally, Microsoft is testing a redesigned news feed in Windows Widgets, with Copilot Discover taking over the classic MSN feed, and a new Copilot Appearance feature that adds non-verbal communication to Copilot, enhancing voice conversations with real-time visual expression. Updates are available This section covers software, firmware, and other notable updates (released and coming soon) delivering new features, security fixes, improvements, patches, and more from Microsoft and third parties. Microsoft has a new Surface in its device lineup. The Surface Laptop 7 with Intel's Core Ultra 200 Series processors is now available with optional 5G connectivity. Microsoft said in the announcement post that equipping a laptop with 5G was not just putting a modem inside. Microsoft had to carefully engineer a so-called "dynamic antenna system" that adapts to the environment and ensures the best reception by having six strategically placed antennas. A rather unfortunate event happened to SharePoint this week. Microsoft revealed details about hackers exploiting an unpatched SharePoint vulnerability, which even managed to breach the US nuclear weapons department, and quickly posted detailed guidance about it alongside much-needed fixes. Files, one of our favorite file managers for Windows 10 and 11, received a big preview update with a reworked address bar. The new Omnibar now combines the address bar and search bar, offering users a more intuitive experience alongside other improvements. Meta is making some significant changes to the WhatsApp client on Windows. The messenger is ditching UWP for a progressive web app, which is now available in beta in the Microsoft Store. Firefox received a big new feature update. Version 141.0 is now available with AI-powered tab groups, vertical tab improvements, WebGPU support, and other changes. Microsoft Edge, on the other hand, received some security fixes and contextual capabilities in the Business Chat work tab. Finally, check out a recap of all the new features that Microsoft added to Intune in July 2025, and a crucial data refresh feature for Excel, alongside a highly-requested PivotTable feature. Here are other updates and releases you may find interesting: Microsoft encourages Windows driver development in Rust for better security. Microsoft invests in European languages and culture to build smarter, more inclusive AI. UniGetUI received a massive update with bulk download options. Microsoft CEO finally addressed the recent layoff of 9,000 employees. Microsoft is planning a huge upgrade for Visual Studio. Microsoft Viva Insights boosts Copilot and learning with new reports. Windows 365 received a big RDP upgrade. Here are the latest drivers and firmware updates released this week: Intel 32.0.101.6972 non-WHQL with optimizations for Killing Floor 3, Valorant's Unreal Engine 5 upgrade, and Wuchang: Fallen Feathers. Nvidia 577.00 WHQL with Valorant UE5 upgrade support, WUCHANG: Fallen Feathers, and more Reviews are in Here is the hardware and software we reviewed this week Robbie Khan reviewed the GameSir G7 Pro, a fantastic Xbox-licensed controller with TMR sticks, excellent software, optical buttons, and premium materials. Steven Parker reviewed the OXS Storm A2, a wireless gaming headset with hybrid ANC. On the gaming side Learn about upcoming game releases, Xbox rumors, new hardware, software updates, freebies, deals, discounts, and more. This week, Microsoft announced some useful gaming updates. The company is now testing cross-device play history on Xbox consoles and PC, which should let players easily jump back into games that support features like Xbox Play Anywhere or Xbox Cloud Gaming, regardless of what platform they are using. Another useful and welcome update is about the future prices of Xbox games. Microsoft made a sudden U-turn and ditched the $80 price tag, which was supposed to arrive with the launch of The Outer Worlds 2. EA has finally announced the next Battlefield game that is coming soon. The first Battlefield 6 trailer shows off a major conflict breaking out across the world, with what looks to be a rogue mercenary group named Pax Armata attacking NATO and its allies. Nvidia announced new games for the GeForce NOW cloud streaming service. The latest additions include Abiotic Factor, WUCHANG: Fallen Feathers, Barony, He is Coming, SUPERVIVE, Wildgate, and more. Keep in mind that you have to own these games to play them using GeForce NOW. Deals and freebies This week's Weekend PC Game Deals is here with various discounts across multiple stores and a new freebie from the Epic Games Store. The latter is giving away Legion TD 2. Other gaming news includes the following: Ubisoft confirms Avatar: Frontiers of Pandora is getting a third-person mode and New Game+ Assassin's Creed Shadows is getting New Game+, level cap increase, and more ahead of DLC launch Valve is redesigning the Steam Store Menu and Search, wants user feedback Frostpunk 2 arrives to Xbox and PlayStation this September, hits Game Pass on day one Great deals to check Every week, we cover many deals on different hardware and software. The following discounts are still available, so check them out. You might find something you want or need. Acer Aspire C27 AIO Desktop - $739.99 | 13% off HP 15.6-inch laptop (model 15-fc0499nr) - $399.99 | 20% off CMF Watch 3 Pro Smart Watch - $79 | 20% off 2TB Crucial P310 NVMe SSD - $149.99 | 38% off 2TB Crucial T710 NVMe SSD - $229.99 | 36% off Samsung Galaxy Tab S10 FE Wi-Fi - $449.99 | 10% off Motorola Edge 2025 - $439.99 | 20% off This link will take you to other issues of the Microsoft Weekly series. You can also support Neowin by registering a free member account or subscribing for extra member benefits, along with an ad-free tier option.
    • A female Jem'Hadar makes no bloody sense whatsoever... They're a male only, genetically engineered, clone species...  Did the idiots making this not watch ANY of DS9, or bother to check a wiki, at ALL? This is going to be crap, isn't it?    
    • Internet Download Manager (IDM) 6.42 Build 42 by Razvan Serea Internet Download Manager (IDM) is a tool to increase download speeds by up to 5 times, resume and schedule downloads. Comprehensive error recovery and resume capability will restart broken or interrupted downloads due to lost connections, network problems, computer shutdowns, or unexpected power outages. IDM integrates seamlessly into Google Chrome, FireFox, Microsoft Edge, Opera, Safari, Internet Explorer, Maxthon and all other popular browsers to automatically handle your downloads. You can also drag and drop files, or use Internet Download Manager from command line. The program supports proxy servers, ftp and http protocols, firewalls, redirects, cookies, authorization, MP3 audio and video content processing. Changes in Internet Download Manager 6.42 Build 42: Updated Chrome extension to support Chrome manifest 3 Fixed bugs Download: Internet Download Manager 6.42 Build 42 | 11.7 MB (Shareware) Links: Internet Download Manager Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      Lokmat Rajasthan earned a badge
      Week One Done
    • One Month Later
      TheRingmaster earned a badge
      One Month Later
    • First Post
      smileyhead earned a badge
      First Post
    • One Month Later
      K V earned a badge
      One Month Later
    • Week One Done
      K V earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      639
    2. 2
      ATLien_0
      241
    3. 3
      Xenon
      176
    4. 4
      neufuse
      155
    5. 5
      +FloatingFatMan
      123
  • Tell a friend

    Love Neowin? Tell a friend!