Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

3 column layout using floats 1

Status
Not open for further replies.
Cullen411

Cullen411

Programmer
Aug 17, 2005
89
GB
I noticed that if I use a 3 column layout using floats that there is column wrapping when the browser window is narrowed.
Is this just something you have to live with when using Floats?
Does absolute positioning guard against this?

CSS

#leftnav
{
float: left;
width: 140px;
margin: 0;
padding: 5px;
}

#rightnav
{
float: right;
width: 140px;
margin: 0;
padding: 5px;
}

#content
{
margin-left: 160px;
margin-right: 160px;
padding: 5px;
}
 
Sort by date Sort by votes
Absolute positioning will not make that happen but it is quite possible that the content will overlap then. I would advise against it, for this and many other reasons. If you enclose your stuff in a container and use relative values you could avoid the wrapping.
 
Upvote 0 Downvote
Hi I'm slightly confused about your reply. Maybe I didn't explain myself, it was overlapping floats

"Absolute positioning will not make that happen but it is quite possible that the content will overlap then" - is that not that same as what floating does?
 
Upvote 0 Downvote
To my understanding, floats cannot overlap, because they wrap (ie fall under the other floated element when they don't fit). Since absolute positioning takes elements out of the flow, they will overlap with each other when the space is not big enough to accomodate them.
 
Upvote 0 Downvote
Hi Vragabond that makes sense and I've ran a few tests that work.

One thing you mentioned was "If you enclose your stuff in a container and use relative values you could avoid the wrapping."

I tried this below but it doesn't set the logo top left and the banner top right, any advice? I used span as div's were wrapping.

<style text="text/css">
body{ padding:0; margin:0; }
#header {width:100%;}
</style>
<body>
<div id="header">

<span style="position:relative;top: 10px; left:0;width:50%;">
<a href="index.php"><img src="/images/Logo.gif" border="0" alt="logo" /></a>
</span>

<span style="position:relative;top: 10px; right:0;width:50%;">
<img src="/images/468x60.gif" border="0" alt="banner" />
</span>
</div>

thanks.
 
Upvote 0 Downvote
How about:
Code: 
<style text="text/css">
body { padding: 0; margin: 0; }
#header { margin-top: 10px; }
.logo { float: left; width: 50%; }
</style>
<body>
<div id="header">
        <div class="logo"><a href="index.php"><img src="/images/Logo.gif" border="0" alt="logo" /></a></div>
        <div class="logo"><img src="/images/468x60.gif" border="0" alt="banner" /></div>
</div>
Add all the appropriate html tags as well as doctype to that.
 
Upvote 0 Downvote
That should work fine, I just thought that you were suggesting another way to do it with relative positioning of the class logo div's?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
648
198709km
198709km
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
213
tyutghf
tyutghf
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
254
waubain
waubain
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
157
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
160
Carlvic
Carlvic

Part and Inventory Search

Sponsor

Back
Top