CSS layout help, please!
- Started
- Last post
- 29 Responses
- Amicus
Hi Guys,
I haven't created websites since back in the day (pre css). I'm trying to teach myself for some work and private projects, but this layout has stumped me...
I know how to achieve this if the nav bar went across all columns, but my layout keeps breaking this way. The content will be inserted via a CMS including a headline that lines up with the bottom of the logo image.
Any help would be appreciated
Cheers!
- ukit0
Is this a liquid layout or fixed width?
- ukit0
This should be pretty easy then. You have two containing divs, one for the logo area and one for all of the main content, both set to float:left. Then, within the main content div, you have the nav div and then the content and advertising divs all set to float.
- HAYZ1LLLA0
2 divs with absolute positioning.
Make all that red box a div that sits from the right, the width of the purple div. Than do what you want in both.
- d_rek0
My best advice is just to prototype the site out and just play with div positioning and size - this is perhaps the trickiest part of CSS. Or better yet find a site similar to what you're looking for and pick apart their style sheet.
Also lets not forget these:
http://www.csszengarden.com/
http://www.w3schools.com/css/
- Amicus0
thanks for all your help... gonna muck around for a little longer, but might have to upload for you to crit and laugh at the code
hehe
- Amicus0
these floats are doing my head in... is it just cause its Monday and my noodle is yet warmed up?
- Jnr_Madison0
People will be able to help more precisely if you show the code, just upload the page.
- ukit0
Might be less confusing if you added background colors to your divs, at least for the purpose of figuring things out.
- b_electro0
Search 2-column css layouts and tweak from there...
- ukit0
Also, looks like you didn't close the "logocontainer" div before the "contentcontainer."
- Amicus0
added background colours...
I think I'm stuffing up how i clear floats.
- ukit0
Add a closing div tag in front of the "content container"
- ukit0
Remove the left margins on content and contentarea. If you are floating them you don't need to set a margin.
- caoimh0
One more thing Amicus - you might be able to get rid of your '<br class="clearfloat" />' by using overflow:auto instead in the css for the containing div .
- Amicus0
thanks caoimh. might try that
- Amicus0
Man... I suck at coding these days... lol
http://www.amicusstudios.com/tem…
this is where I'm up to... I can't see what is stopping the site from being centered, and I'm also wondering how I might implement an mtv style background in future youth oriented parts of the site.
PS. I know the design really sucks (logo wise, and the weird stripes at the top). My boss thinks a portal website for a Jewish Community in Australia should take it's design cues from Motor Magazine... anyways... I'm not Jewish. what would I know
- it's not centered because your #container is floated leftacescence