• 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

    • Apple isn’t based on the Linux kernel, why should they upstream to that? Linux had the opportunity to create their own feature for 25 years because CUPS has been open source for years, but wait let me guess…… the developers has waited for 25 years for Apple to upstream to them then finally decided to create their own feature, How stupid does that sound?? I assume you were one of those developers who blamed Apple for 20 years for this?
    • Five things Windows 10 never fixed by Usama Jawad Windows 10 is fast approaching its tenth birthday, and to celebrate the occasion, we have been publishing features about the OS. These include items like our top 10 stories about Windows 10 from the past decade, 10 features that just never took off, and the operating system itself being one of the main reasons why Microsoft customers are so conscious about privacy now. As we turn the page on Windows 10, we thought it would be interesting to take a look at some lingering issues or elements in the operating system that Microsoft hasn't been able to fix, despite the OS reaching ten years of life. Please keep in mind that the list below is not in any particular order: Settings vs. Control Panel Back in 2015, Microsoft told customers that it was working on deprecating the legacy Control Panel in favor of its modernized Settings app. Of course, this meant transitioning all existing Control Panel functionalities to this new interface, but Microsoft rightly emphasized that this was important to reduce code complexity and make the overall system leaner. However, fast-forward 10 years, and this is still a work in progress, even in Windows 11. The Redmond firm has been focusing on migrating elements to the Settings app, but still seems unsure if it wants to truly kill Control Panel or not. It's baffling at this point, really, but at least there are fewer reasons to use the legacy application now. Error 0x80070643 This Windows Recovery Environment (WinRE) error has been plaguing Windows 10 for over a year, but it's unfortunate that Microsoft can't fix it in an automated fashion and requires customers to perform manual steps. Now, the company has just settled on telling customers that they should just pretend that the error is not there, which, granted, isn't super difficult to do since it doesn't impact any critical workflows. Tablet Mode As the name implies, Tablet Mode in Windows 10 is a touch-friendly UX, which contains several changes in Windows 10 to make it easier to use with your hands. However, the company has never been able to really nail the concept despite multiple pivots in strategy leading up to Windows 11. It's just not that user-friendly, and it doesn't really boost productivity in a meaningful way. You're better off keeping your keyboard attached and just using that. Windows Search Look, I love Windows Search; you can read my whole essay on the topic. However, I do accept the functionality's shortcomings too. It just prioritizes Bing Search too much in some cases, especially when your search term is the slightest bit off from what is required. In a way, it does promote Bing to more customers, but I do think that ship has sailed, and at this point, Microsoft is risking alienating its user base even further with each passing day. UX inconsistencies Image via Microsoft In 2017, Microsoft announced the Fluent Design scheme for Windows 10. Although it looks great on the surface, the problem once again lies with Microsoft's execution. We are 10 years into the life of an operating system that is fairly mature by now, but still, we can see modern design elements along with legacy elements throughout the OS. This problem extends to the system theme too, where dark mode is not consistently applied across applications, even in those developed by Microsoft itself. What Windows 10 elements continue to irk you? Let us know in the comments section below! This story is a part of our "10 Years of Windows 10" collection, in celebration of the operating system's tenth anniversary, falling on July 29, 2025. Over the next few days and weeks, you'll be able to find more content on this topic in our dedicated section available here.
    • I am just messing with you. Anyway, no one made the argument that wasn't the case so no problems.
    • NTLite 2025.07.10541 by Razvan Serea NTLite is a Windows configuration tool that allows you to modify your existing Windows install or an image yet to be deployed, remove Windows components, configure and integrate, speed up the Windows deployment process. Reduce Windows footprint on your RAM and storage drive memory. Remove components of your choice, guarded by compatibility safety mechanisms, which speed up finding that sweet spot. Windows Unattended feature support, providing many commonly used options on a single page for easy setup. Easily integrate a single or multiple drivers, update or language packages. Package integration features smart sorting, enabling you to seamlessly add packages for integration and the tool will apply them in the appropriate order, keeping hotfix compatibility in check. One of the important new features of NTLite (compared to its predecessors) is the ability to modify an already installed the operating system, by removing unnecessary components. Supports Windows 11, 10, 8.1 and 7, x86 and x64, live and image. Server editions of the same versions, excluding support for component removals and feature configuration. ARM64 image support in the alpha stage. Does not support Checked/Debug, Embedded, IoT editions, nor Vista or XP. NTLite 2025.07.10541 changelog: Upgrade UI: Accessibility improvements, e.g. ribbon and page refocusing on Alt, status readout UI-Translation: Thanks for Hungarian (John), Italian (clarensio), Russian (RDS) Fix Components: Edge Canary initial start crash after removing WLAN and Autopilot together Download: NTLite 64-bit | 21.5 MB (Free, paid upgrade available) Download: NTLite 32-bit | 19.3 MB Link: NTLite Home Page | NTLite Features | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • One Year In
      Schwarzenbach earned a badge
      One Year In
    • Collaborator
      NullReference earned a badge
      Collaborator
    • Dedicated
      John Volks earned a badge
      Dedicated
    • One Month Later
      KenKay earned a badge
      One Month Later
    • Week One Done
      KenKay earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      664
    2. 2
      ATLien_0
      250
    3. 3
      Xenon
      178
    4. 4
      neufuse
      153
    5. 5
      +FloatingFatMan
      126
  • Tell a friend

    Love Neowin? Tell a friend!