• 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

    • "Let's antagonize them more so they'll be less likely to invade us" Good logic there.
    • Samsung One UI 8 Watch beta program goes live in Korea and the U.S, for eligible devices by Sagar Naresh Bhavsar After launching the Android 16-based One UI 8 beta program for the Galaxy S25 series, Samsung has also kicked off the One UI 8 Watch beta program for eligible Galaxy smartwatches. Notably, the beta program is live for Galaxy Watch users in the U.S. and Korea through the Samsung Members app. The new One UI 8 Watch introduces a bunch of new health features, which Samsung says are to "help users build healthier habits." New features include Bedtime Guidance, Vascular Load, Running Coach, and Antioxidant Index. Here's what each feature does: Bedtime Guidance It recommends Galaxy Watch users the best time they can get a good sleep based on their recent sleep patterns. This feature could be helpful for those who have a hard time having a good asleep. To recommend the best sleep patterns, the Bedtime Guidance uses sleep data from the past three days and analyzes metrics such as sleep pressure and circadian rhythm. Sleeping on the recommended time may help users recover from irregular schedules and sleep patterns. Vascular Load Using this feature, the One UI 8 Watch-powered Galaxy smartwatches will measure the amount of stress your heart and blood vessels experience during sleep. It is one of the key indicators of heart health, because if the vascular load shows excessive fluctuations, then it could be an indicator of an underlying cardiovascular issue. Running Coach Samsung has also added a Running Coach feature with the One UI 8 Watch. It gives users a personalized running program based on their fitness levels. The user needs to run for 12 minutes for the Galaxy Watch to register and analyze certain metrics and present a performance score. Based on the score, the Running Coach will present a tailored plan to help them safely reach and work up to marathon levels. Antioxidant Index The Antioxidant Index measures the carotenoid levels, which are antioxidants found inside green and orange fruits and vegetables that are inside your skin, meant to fight aging and cell damage. With One UI 8 Watch, the Galaxy Watch will make use of a light-based sensor to scan the skin and, in five seconds, will show a report on how their eating habits are paying off. Eligible devices Beta program is available for owners of Galaxy Watch5 or later in the U.S. and South Korea. However, not all features will be available on all supported Galaxy Watch models. Here are the details: Bedtime Guidance: Available on Galaxy Watch5 series or later, requires Android phone running Android 11 or later and Samsung Health app v6.30.2 or later. Vascular Load: Supported on Galaxy Watch Ultra or later, requires Android 10 or later, and Samsung Health app v6.30.2 or later. Running Coach: Requires Galaxy Watch7 or later, Android 10 or later, and Samsung Health app v6.30.2 or later. Antioxidant Index: Supported on Galaxy Watch Ultra or later, Android 10 or later, and Samsung Health app v6.30.2 or later. How to join beta program If you own a Galaxy Watch5 series or later model, then you can head over to the Samsung Members app > navigate to the bottom of the page > tap on the Watch Beta poster > and enroll for the beta prorgam. Do note that their are limited seats available.
    • I disabled the optical camera in device manager.. leaving only the IR. This has fixed the issue for me...but only because I never use the optical camera. After each monthly update re-enable the optical just to see if it's fixed...but nope! It's annoying though how this issue hasn't been acknowledged by Microsoft.
    • Linux is a different kettle of fish to macOS and Windows, if it ran the software I required, I may have looked at it, instead of the Mac, also the Mac is a pretty powerful machine that uses less energy than x86 machines. I never in my widest dreams thought I would ever buy a Mac, the price and restrictions of the hardware, I always liked machines that I could update internally, one reason why I never liked laptops. But here I am, a nice little Mac mini M2 pro. I doubt i will replace it for a long time, if I ever do, it does what I need.
    • 106 years ago! A comic strip from 1919 predicted — eerily and accurately — what would happen if our phones fit into our pockets.  W. K. Haselden’s ‘The Pocket Telephone: When Will it Ring?’ was published in “The Mirror” when barely 1/3rd of American homes even had telephones. (A double irony: most of us are viewing this on our “pocket phones”.)
  • Recent Achievements

    • Week One Done
      patrickft456 earned a badge
      Week One Done
    • One Month Later
      patrickft456 earned a badge
      One Month Later
    • One Month Later
      Jdoe25 earned a badge
      One Month Later
    • Explorer
      Legend20 went up a rank
      Explorer
    • One Month Later
      jezzzy earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      640
    2. 2
      ATLien_0
      277
    3. 3
      +FloatingFatMan
      172
    4. 4
      Michael Scrip
      156
    5. 5
      Steven P.
      132
  • Tell a friend

    Love Neowin? Tell a friend!