• 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

    • I almost picked one up...Best Buy has a heck of a time getting them, much less keep them in stock.
    • Microsoft bans LibreOffice developer's account without warning, rejects appeal by David Uzondu Recently, we reported on LibreOffice, accusing Microsoft of intentionally using complex file formats as a tactic to lock in users to Microsoft Office, hindering open source alternatives like LibreOffice. Now, Microsoft has banned LibreOffice developer, Mike Kaganski, from using its services, citing an "activity that violates [its] Services Agreement". According to Mike, this happened last Monday when he tried to send a technical email to the LibreOffice dev mailing list, which is a normal part of his routine, but Thunderbird returned an error saying the message couldn't be sent. His account was blocked upon retry, and he found himself completely logged out of his Microsoft account. Kaganski guessed that his mail and account were getting flagged by a bot or something, since he was quite sure that nothing in the mail violated Microsoft's terms of service. So he decided to file an appeal, a process which later made him call Redmond "miserably incompetent in IT." The automated system asked for his phone number, which he provided, only to be greeted by a "Try another method" error message. The problem was that there was no other method offered. He then decided to reach out to Microsoft support directly. After some digging, he found a link to contact the team, and there it was, a button asking him to "Sign in to Contact support". Now, you might go, "Hold up, how is he supposed to sign in to contact support when his problem is that he can't sign in in the first place?" As Kaganski himself put it: He eventually got to use his wife's account to file an appeal and finally received a message from support. The instructions inside asked him to go to the sign-in page and, when told the account is blocked, provide a phone number (something he had already tried). Microsoft ignored his detailed report of the failing process, marked his ticket as resolved without any real action, and simply closed it. He is yet to recover his account. As for the email he was trying to send, he was later able to use Gmail, and it went through with no problem. If you are interested, you can read the full email for yourself and see if it violates Microsoft's services agreement. Mike's not the only person who's had their account locked recently, with seemingly no way to recover it. On the 17th of last month, Reddit user u/deus03690 shared how Microsoft locked their account, which, among other things, contained 30 years of "irreplaceable photos and work" on OneDrive. Their appeal, like Mike's, has been fruitless so far. The user said Microsoft reached out 10 days later, asking them to fill out a recovery form and promising to help them "every step of the way," but they haven't heard from the company since.
    • It's like Microsoft hasn't learned anything from Internet Explorer fiascos. Or they weren't slapped hard enough financially for it...
    • Yes they're payroll taxes with some of it linked to share-based compensation for employees. So when the stock price was rising in q2 these charges also increased.
  • Recent Achievements

    • Apprentice
      MikeK13 went up a rank
      Apprentice
    • Week One Done
      andeyhawk65 earned a badge
      Week One Done
    • First Post
      Jake2530 earned a badge
      First Post
    • Explorer
      Deranox went up a rank
      Explorer
    • Week One Done
      John Volks earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      687
    2. 2
      ATLien_0
      259
    3. 3
      Xenon
      178
    4. 4
      neufuse
      135
    5. 5
      +FloatingFatMan
      100
  • Tell a friend

    Love Neowin? Tell a friend!