CSS layout help, please! 2929 Responses

Last post: 2 months, 3 weeks ago | Thread started: Aug 24, 08, 6:57 p.m.

RespondNew TopicDisable Images

• 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!

  Aug 24, 08, 6:57 p.m. – Permalink

• ukit

  Is this a liquid layout or fixed width?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:01 p.m. – Permalink

• Amicus

  fixed... cheers

  • Oh, and it will all be centered in the window in a container (black box)– Amicus1/2

    aw crap. i guess the container needs to include the footer as well– Amicus2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:03 p.m. – Permalink

• ukit

  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.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:07 p.m. – Permalink

• HAYZ1LLLA

  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.

  • if it was fixed width.– HAYZ1LLLA

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:08 p.m. – Permalink

• d_rek

  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/

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:10 p.m. – Permalink

• Amicus

  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

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:21 p.m. – Permalink

• Amicus

  these floats are doing my head in... is it just cause its Monday and my noodle is yet warmed up?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:30 p.m. – Permalink

• Jnr_Madison

  People will be able to help more precisely if you show the code, just upload the page.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:34 p.m. – Permalink

• Amicus

  http://www.amicusstudios.com/tes…

  • don't laugh, too much. That coke'll come out your nose.– Amicus

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:34 p.m. – Permalink

• ukit

  Might be less confusing if you added background colors to your divs, at least for the purpose of figuring things out.

  • +1– Jnr_Madison

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:36 p.m. – Permalink

• b_electro

  Search 2-column css layouts and tweak from there...

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:37 p.m. – Permalink

• ukit

  Also, looks like you didn't close the "logocontainer" div before the "contentcontainer."

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:39 p.m. – Permalink

• Amicus

  added background colours...

  I think I'm stuffing up how i clear floats.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:40 p.m. – Permalink

• ukit

  Add a closing div tag in front of the "content container"

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:41 p.m. – Permalink

• Amicus

  updated... but it still isn't working... I need to find a lamp with the CSS standards genie trapped inside.

  • ps. thanks for all the advice, i think it is getting somewhere. If only the boss would hire a coder– Amicus

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:46 p.m. – Permalink

• ukit

  Remove the left margins on content and contentarea. If you are floating them you don't need to set a margin.

  • *content and contentcontainer*– ukit

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:49 p.m. – Permalink

• Amicus

  OMG.... thanks for your help ukit.... you da man (or woman).

  I think after a few epic fails i might have some success here.

  • btw... had margins on advert as well– Amicus1/2

    No problem– ukit2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 7:57 p.m. – Permalink

• caoimh

  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 .

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 24, 08, 11:19 p.m. – Permalink

• Amicus

  thanks caoimh. might try that

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 26, 08, 8:13 p.m. – Permalink

• Amicus

  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 left– acescence

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earAug 26, 08, 8:18 p.m. – Permalink