Creating a 2 column layout, within a div

  • vegancoder
  • Graduate
  • Graduate
  • vegancoder
  • Posts: 176

Post 3+ Months Ago

Hello!

Im trying to create something like this:
Image
But in firefox it ends up looking like this:
Image
Strangely though IE is doing what i want. here is a link: http://nanothree.net/projects/pnet/page.html

Can anyone help me out?

Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • trinimayl
  • Born
  • Born
  • trinimayl
  • Posts: 2

Post 3+ Months Ago

Hi. Try something like:

#leftheader { width: 400px; border: 1px #000000; float: left}
#rightheader { width: 400px; border: 1px #000000; float: right}

And in the html:

<div id="mainheader">
<div id="leftheader"><p>Nav2</p></div>
<div id="rightheader"><p>form goes here</p></div>
</div>
Using the float property removes an element from its surrounding div. To fix that, add .clear { clear: both;} to your CSS.

This should help
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

yes, trinimayl is absolutely right, what I usually do is add another div called something like "div.clear" with the following properties:
Code: [ Select ]
div.clear{clear:both;height:0px;width:0px;}

and then place this just after the last item inside the "mainheader" div ...
  • vegancoder
  • Graduate
  • Graduate
  • vegancoder
  • Posts: 176

Post 3+ Months Ago

nice one thanks!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I did a site like that, except it's more complex. By "complex" I mean like divs after a div in a row. Like 4 divs in a row and than I'll start another row... I never used a div.clear type of thing... Works perfectly in all browsers...

Although, I'm not saying not to do the div.clear thing... it's up to you and what works for you best.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

no, the div.clear thing is only necessary if you have a bigger div below all of them within the same container, otherwise it's not necessary ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

oh ok. Makes sense :)
  • littlenoob
  • Born
  • Born
  • littlenoob
  • Posts: 1

Post 3+ Months Ago

lol..quite a good design~
:D

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 78 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.