PDA

View Full Version : When a float doesn't float

newbi
08-07-2006, 02:43 PM
Hi All - Gotten stuck with my layout and I'd like to see if anyone has a brilliant idea. It's probably very simple and I'm just missing it.

Here's the relevant HTML:

<body>
<div id="wrapper">
<div id="header">
<!-- image will come here: <img src="HomePageLogo.jpg" alt="" height="xx" width="yy" /> -->
<h1>{<span>&nbsp;Title&nbsp;</span>}</h1>
<div id="header-bottom">
<p><a href="HomeH.html" target="_self">Link</a></p>
</div> <!-- header-bottom -->
</div> <!-- header -->

<div id="main">
<div id="content">
<h2>Heading</h2>
<p>Text will come here.</p>
</div> <!-- content -->

<div id="sections">
<ul id="hoverbox">
<li><a href="#"><img src="images/photo.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
<li><a href="#"><img src="images/photo.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
<li><a href="#"><img src="images/photo.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
<li><a href="#"><img src="images/photo.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
</ul>
</div> <!-- sections -->
<div id="clearone">&nbsp;</div>
</div> <!-- main -->

</div> <!-- wrapper -->
</body>
</html>

And the rel. CSS:

body {
margin: 0;
padding: 0;
background-color: f5f5f5;
color: #626477;
font: Georgia, "Palatino Linotype", "Trebuchet MS", sans-serif;
}

#wrapper {
background-color: transparent;
margin: 0 250px 15px 15px;
border: 1px solid black;
padding: 10px;
height: auto;
}
#main {
margin-top: 20px;
border: 1px solid blue;
position: relative;
}

#content {
margin: 0 0 0 200px;
border: 1px solid red;
padding: 0 0 0 1em;
width: 300px;
}

#sections {
/* position: absolute;
top: 0;
left: 0; */
float: left;
width: 160px;
margin: 0;
padding: 0;
border: 1px solid green;
}
#clearone {
clear: both;
height: 1px;
}

Note: the borders are just so I can see what's where and the typed out part in the 'sections' div is just me experimenting with absolute positioning for that div.

Anyway, here's the problem. I'm trying to float the sections div right alongside the content div - essentially a two-column layout w/ header. For some odd reason, the sections div will not float next to the content div, rather, it stays on the left but starts on the same line the content div ends. So it's below and to the left of it.

When I use abs positioning it goes where I want it, the problem then is that the main div becomes shorter than the sections div (due to the latter being removed from the doc flow) and I don't know how to fix that.

Could someone please advise as to what I'm doing wrong and/or which one should I go with - absolute or float?

Thank you so much and if you need the rest of the code just yell.

Thanks!
Chris
08-07-2006, 02:57 PM
I'm not a big fan of 'floating' DIVs and normally use absolute positioning :)

The only problem with that is the difficulty in making it look good in all browsers/resolutions.

Instead of using exact value widths (300px), use percentages. That way, a DIV of 70% will fit nicely alongside a DIV of 30% :)
newbi
08-07-2006, 03:03 PM
Thanks, Chris - so then if I abs position it, how do I deal with the fact that the main div becomes shorter than my sidebar? Any ideas?
Chris
08-07-2006, 03:07 PM
Well, the height is dependant on the content within a DIV. If you wanted them to both be the same height, then you will need to pick a height which you know that the content will not reach, and set both of the DIVs to that height.

Did that make sense? :)
newbi
08-07-2006, 03:10 PM
It does, there's just a tiny problem: I have no idea what that height is! :)
Chris
08-07-2006, 03:12 PM
The best thing to do would be to look at the page which has the most content in the DIV, and which is therefore the 'tallest'. Play around with the height of that DIV, until it fits perfectly, and then you'll have your height.

The only problem with that would be if you had a page with only a few lines of text at the top, and would then have a huge space below it :)
newbi
08-07-2006, 03:14 PM
I guess I'll just play around with it, then. It just looks as though there should be a more scientific route. :)
Thanks for your help, Chris!
Chris
08-07-2006, 03:22 PM
I think that a lot of people who have such a layout don't mind if one column (such as the main DIV which might contain a blog, for example) is longer than the other :)

You're welcome. I'm glad I could help :D
J to the izzosh
08-07-2006, 03:23 PM
Well, you could add float:left; to your content div. Don't forget that since it is a block-level element, without the float, the browser will still generate line breaks before and after it.

And Chris is right in the sense that if you're trying to create a header section with nav links, you may be better in using absolute positioning and just deciding on a static height, otherwise, you may end up with a lopsided looking header when the heights of content and sections differ.
Chris
08-07-2006, 03:25 PM
And Chris is right in the sense that if you're trying to create a header section with nav links, you may be better in using absolute positioning

Thank goodness. I thought I was talking jibberish at some points :lol:
newbi
08-07-2006, 03:35 PM
Well, it does seem jibberish at the moment because I'm not quite clear on how the height of my columns would affect the header but being new to CSS, I'm just happy my div is now where it is. That obstacle jumped, I'm now struggling with my list here and am ready to slam the keyboard somewhere but I guess that's just part of the game, isn't it. :confusion
J to the izzosh
08-07-2006, 03:42 PM
That, and copious amounts of caffeine.
newbi
08-07-2006, 03:47 PM
You're talking to a non-coffee drinker here. :tired:
newbi
08-07-2006, 03:49 PM
OK, sorry, I might be breaking rules here but could I have another question? Why would an element inside a div in the html appear outside its borders in the browser?
Chris
08-07-2006, 03:55 PM
You're not breaking any rules - ask as many questions as you require - we're here to help :)

Do you have a link to the site so that I can have a look at it and the code?
newbi
08-07-2006, 04:08 PM
Oh you guys make me feel fuzzy. :blush:

Anyway, no, it's not up yet, sorry. Now I'm struggling with the left column, a number of things. For some reason, the 'sections' div seems to not contain anything (i.e. when I put the green border around it, it's just a straight line). And then the top image (I'm just experimenting with that one for now) for some reason wants to be at a certain distance from the left side and I can't make it move to the left to save my life.

Here's relevant html:

<div id="sections">
<ul id="hoverbox">
<li><a href="HomeH.html"><img src="Images/1.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
<li><a href="#"><img src="images/photo.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
<li><a href="#"><img src="images/photo.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
<li><a href="#"><img src="images/photo.jpg" alt="Photo" /><img src="images/photo.jpg" alt="Photo" class="preview" /></a></li>
</ul>
</div> <!-- sections -->

And CSS:

body {
margin: 0;
padding: 0;
background-color: f5f5f5;
color: #626477;
font: Georgia, "Palatino Linotype", "Trebuchet MS", sans-serif;
}

/* --- div styling --- */

#wrapper {
background-color: transparent;
margin: 0 250px 15px 15px;
border: 1px solid black;
padding: 10px;
}
#main {
margin-top: 20px;
border: 1px solid blue;
position: relative;
}

#content {
margin: 0 0 0 200px;
border: 1px solid red;
padding: 0 0 0 1em;
width: auto;
}

#sections {
position: absolute;
top: 0;
left: 0;
width: 120px;
border: 1px solid green;
}
#clearone {
clear: both;
height: 1px;
}

/* --- headers --- */

h1 {
font-size: 2em;
letter-spacing: 0.7em;
text-align: right;
}

h1 span {
font-style: italic;
}

h1, h2 {
color: #E07601;
}

/* --- breadcrumb and language link --- */

#header-bottom ul {
margin: 0;
padding: 0;
float: left;
}

#header-bottom li {
display: inline;
}

#header-bottom p {
text-align: right;
margin: 0;
padding: 0 10px 0 0;
}

/* --- general links --- */

a {
text-decoration: none;
border-bottom: 1px dashed;
}
a:link {
color: #626477;
}
a:visited {
color: #E07601;
}

a:hover, a:active {
color: #E07601;
}

/* --- hoverbox --- */

#hoverbox {
list-style: none;
border: 1px solid orange;
position: absolute;
top: 0;
left: 5px;
width: 100%
}

#hoverbox a .preview {
display: none;
}

#hoverbox a:hover .preview {
display: block;
position: absolute;
top: -33px;
left: 35px;
z-index: 101;
}

#hoverbox img {
background: #fff;
/*padding: 5px;*/
vertical-align: top;
width: 100px;
height: 100px;
}

#hoverbox li {
display: inline;
/*margin: 3px;
padding: 5px;*/
position: relative;
top: 5px;
left: 5px;
}

#hoverbox .preview {
width: 100px;
height: 100px;
}

I gave you the whole nine yards because with my luck, the annoying bit is probably somewhere completely irrelevant. Or so it would seem. :)

And here's sort of where I'm going:
http://www.openwebdesign.org/viewdesign.phtml?id=2921&referer=%2Fbrowse.php%3Fpage%3D5

Different look but same sort of layout.

Whew. Lots of code there, sorry for the overload but I'd really appreciate some insight. Thanks!

ETA: Oh, the image for now is just a 100*100 dummy image.
newbi
08-07-2006, 11:49 PM
I've figured it out now. Thanks for all the help, though!
J to the izzosh
08-08-2006, 02:24 AM
You're talking to a non-coffee drinker here. :tired:

Ahhhh, well there's your problem!
Chris
08-08-2006, 10:21 AM
I've figured it out now. Thanks for all the help, though!

You're welcome :)