• 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

    • Microsoft isn't happy you're using unsupported Exchange versions, announces final deadline by Usama Jawad Earlier this month, Microsoft announced Exchange Server Subscription Edition (SE), which is the official transition of the product to the Modern Lifecycle Policy, where software is continuously serviced without an end-of-life date, as long as you keep it updated. It also revealed surprising, but brief, Extended Security Updates (ESUs) for Exchange 2016 and 2019. As it winds down support for these products, the company has expressed some displeasure that some customers are using even older and, obviously, unsupported versions of Exchange. In a blog post, the company has noted that it currently offers migration tools that enable the migration of public folders from on-premise Exchange 2013 or older versions to Exchange Online. This is by design, but Microsoft is now changing its tune on the topic. Starting from October 1, 2025, customers leveraging Exchange 2010 or older versions of the software will not be allowed to use Microsoft's tools to migrate their public folders to Exchange Online. Microsoft believes that this deprecation will reduce reliance on legacy systems and enhance "long-term service reliability". Any migrations that are attempted after the aforementioned date will fail, so Microsoft has urged customers to complete their migrations as soon as possible. If customers want to move their data to Exchange Online after October 1, they will first have to upgrade to a newer Exchange version, which is Exchange 2013, but it is important to keep in mind that supported versions are 2016 and 2019. Microsoft has emphasized in a rather stern tone that it does not encourage using unsupported versions of Exchange Server at all, and it has just put out this advisory because it is aware that public folder migrations from legacy systems are currently active, even though they shouldn't be. Needless to say, customers should upgrade to Exchange Server 2016 or 2019 as quickly as possible, but ideally, they should consider moving to Exchange Server SE at this point, considering that the other two versions are running out of support soon, too.
    • A little bit, yeah, if you ask me. Granted, he has the right to be upset with this jerk user that attacked him, but why drop the entire project just because of ONE person? Seems a little exaggerated.
    • Xbox July Update brings PC app cloud upgrades and Rewards support by Pulasthi Ariyasinghe The Xbox team at Microsoft has another major series of updates hitting its platforms. The Xbox July Update is primarily bringing new features to the PC application, while cloud gaming services are also being upgraded. A lot of these additions were a part of Insider testing sessions previously, but now they are ready for prime time. First off, Game Pass Ultimate members can now stream supported games over the cloud, as long as they own a copy on the Xbox store. The Stream Your Own Game feature can be accessed via the Cloud Gaming section on the Xbox PC app. The feature now boasts over 250 supported games too, with recent additions including classic Assassin's Creed titles, LEGO games, and the Saints Row series. Upcoming games to the lineup include RoboCop: Rogue City – Unfinished Business, Tetris Effect Connected, Wo Long Fallen Dynasty, and more. Check here to get a full list of games. Don't forget that cross-device play histories on the app also landed for Xbox Insiders earlier this month, letting players see what games they have been playing regardless of console, PC, or cloud Xbox platform being used. Another new feature announced today as landing on the PC app this month is Rewards with Xbox. Only available in select markets and only for those above 18, Rewards can now be found in the Home section with easy access to checking out how to get more points, track progress, and more. The Xbox and Antstream Arcade joint venture, the Retro Classics app, is gaining seven more games too. These are Caesar, Conquests of Camelot: The Search for the Grail, Gabriel Knight: Sins of the Fathers, Hard Head, Okie Dokie, Skate Boardin’, and Skeleton+. Lastly, mouse and keyboard as well as touch controls continue to roll out for more games, with Police Simulator: Patrol Officers getting support for the former while South of Midnight has gained the latter.
  • Recent Achievements

    • Week One Done
      NeoWeen earned a badge
      Week One Done
    • One Month Later
      BA the Curmudgeon earned a badge
      One Month Later
    • First Post
      Doreen768 earned a badge
      First Post
    • One Month Later
      James_kobe earned a badge
      One Month Later
    • Week One Done
      James_kobe earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      669
    2. 2
      ATLien_0
      253
    3. 3
      Xenon
      165
    4. 4
      neufuse
      144
    5. 5
      +FloatingFatMan
      117
  • Tell a friend

    Love Neowin? Tell a friend!