CSS formatting

[sathenzar]

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.

[Axel]

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!

[sathenzar]

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.

[ashpowell]

Could you post an example? Float right should make it stick to the right

[primexx]

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

[sathenzar]

<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.00}", gsDef.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="[email protected](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))
                </div>
                <div id="xGSAddrIfoOptsDiv">
                    <a href="#" data-id="@Html.Raw(gsDef.GarageSaleId)" data-lat="@gsDef.GarageSaleCoordsLat" data-lng="@gsDef.GarageSaleCoordsLong">Focus on @Html.Raw(gsDef.GarageSaleName)</a>
                </div>
            </div>
        </div>
        <div class="cDiv"></div>
    </div>

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.

[sathenzar]

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.

[ACTIONpack]

You should be using Class and not ID

[Seahorsepip Veteran]

Something like this?

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

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).

[fobban]

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.

[Seahorsepip Veteran]

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

[AndroidOS]

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.

[Seahorsepip Veteran]

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.

[sathenzar]

I finally got it to work with the help of you guys. Plus I forgot to clear the floating of divs where I needed to so that was creating problems as well :)