Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Website layout a bit tricky for me!

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #167154
    KhaiM
    Participant

    I thought I could get this down after I was done designing it in Photoshop, but I’m scratching my head wondering how to do this in the most semantic way, as well as make it look OK in older browsers.

    The part I get confused at is here:

    http://prntscr.com/35migr
    http://prntscr.com/35mkd9

    See how the black containers cut off in the middle? that would basically be two columns floated left and right. All good. The problem is if I float the columns like that, the container holding the columns would need to have a width of maybe 80-95% of the page and set margin to 0 auto so it can stay centered. Once I do that, I can’t get the black containers to span all the way to the end of the browsers left and right, like in the photo.

    More divs, maybe?

    I’m just really confused how I would go on doing this. Any ideas.

    Thanks.

    Here’s where I started: http://cdpn.io/megCz

    #167184
    Paulie_D
    Member

    More divs would be the way to go. A div doesn’t have an real semantic meaning as such so there is no harm in using more of them.

    See this: http://codepen.io/Paulie-D/pen/oGKtA

    All the levels are divs that are, by definition 100% wide. When required there is an ‘inner’ div which has a class which sets a specific width and centers it in the ‘outer` div.

    So in your case: http://codepen.io/anon/pen/mjJxB and so on.

    If you need two columns you can put them ** inside** the 'inner divs and given them any background color you want.

    http://codepen.io/anon/pen/hIbAr/

    #167191
    KhaiM
    Participant

    Thanks for the tips, Paulie.


    @wolfcry911
    , Well that seems to get the job done.

    About the tagline and social buttons – facebook and twitter are actually the same width; That was just a design error on my part. the black is actually just the hover state. So once you’re not hovering, all you see are the icons. The tagline is actually aligned to the left. text-align: left;, but that might be a problem since we have two columns- where would the tagline sit? I was thinking of just separating it from the columns, give it it’s own container and make it the full width of both columns combined so then I could align the text to the left.

    Here’s an example:

    http://prntscr.com/35r4br

    http://prntscr.com/35r84h

    This might turn into a nightmare, since I’m going to have to make this design a responsive one.

    #167197
    Paulie_D
    Member

    @wolfcry911

    I think you’ll need to throw some clearfix’s in there too.

    :) Just saying.

    #167241
    KhaiM
    Participant

    @wolfcry911

    I really like this second option. One question though; Is it possible for the #site-wrapper to be sort of elastic? Fixed width layouts I’m trying to avoid all together.

    It seems if I add an .inner-body to the col-2 and 1 with the width set at 95%, everything is ok. But if I try to mess with the #site-wrapperwidth, the whole layout breaks. I basically want the whole layout to be able to scale for different screen widths,( not talking about media queries just yet!).

    This is a great start, though.

    #167349
    KhaiM
    Participant

    Ok- so what I did was take a safer route and simplified the design a bit. It’s easier for me this way and it still looks really good. This will also make the responsive transition a lot less difficult.

    Thanks for all of your help, Paulie and Wolfcry. I learned quite a bit. ;)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.