CSS - Floating Divs

Hi there!

I'm using this code:
CSS:
Code:

#content {
margin-top: 75px;
width: 597px;
height: auto;
}

#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}

#right {
width: 485px;
height: 100px;
}

HTML:
Code:

<div id="content">
<div id="left">
&nbsp;
</div>
<div id="right">
&nbsp;
</div>
</div>

---------

But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help.

URL

I am working on this site for a client and I can't figure out what the hell I'm doing wrong. It doesn't "work" in FireFox, which of course (I assume) means that IE is simply forgiving my errors, but let's not have a religious debate, let's solve problems.

http://www.nolower.com/example.php

http://www.nolower.com/css/public.css

I am curious about two things:

1) Why is my white background (the main div) not showing up on this page? I thought I had cleared every float, yet, still, there it isn't!

2) Why does the background shadow (the main div), a background image that extends into the padding in IE as you'll see, not show up on FireFox?

If anyone can help identify what I've done wrong and explain to me what made it break in CSS, I'd be very grateful. I've been trying to figure out the peculiarities of CSS and its very poor cross-implementation (not that tables were ever cross-implemented well either, oi) for about a year now and I always either make a new mistake or find something I haven't figured out yet.

Thanks!

I have a container div that contains multiple divs floating left within it. The container css is

Code:

div.divContainer{
	width:100%;	
}	

The child divs css is:

Code:

div.div1{
	float: left;
	width:50%;
}

When the contents of the left div gets too large (and the browser window too small) the end divs wrap. I have researched this quite a bit and it seems like a solution is to give the container a fixed pixel width. I would like to keep it a relative width. Any ideas? I would even consider placing a horizontal scrollbar on the container rather than having it wrap

Thanks

hi, this might be a simple question:

i have a "sidebar" div and a "img-content" div. I floated "sidebar" left and "img-content" right. i want them to be side-by-side. in IE6, the "img-content" div is to the right of "sidebar," but is also below it. in other browsers, they sit side-by-side (which is what i want).

this must be a common problem, so before i post my code, wondering if anyone can point me to the fix/hack to get the 2 divs to sit side-by-side in IE6?

thanks, tim

What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border.

Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line.

My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div?

Here is an example of what I have right now (before tackling the problem):

CSS:
Code:

#content {
	width: 800px;
	margin: 0;
	padding: 0;
}

#contentNav {
	width: 140px;
	float: left;
	border: thin solid black;
	margin: 0;
	padding: 0;
}

#contentMain {
	width: 600px;
	float: right;
	margin: 0;
	padding: 0;
}

HTML:
Code:

 
<div id="content">
	<div id="contentNav">
		<a href="">Link1</a><br />
		<a href="">Link2</a><br />
		<a href="">Link3</a><br />
	</div>
	<div id="contentMain">
		<p>Here comes a lot of text that spans over many lines.
	</div>
</div>

I have two div tags that I want to float next to each other. The page looks like this

<table>These Tables stretch 100% of the width</table>
<table>''</table>

<div class="ParentDiv">
<div class="menuholder"></div>
<div class="ChildDiv"></div></div>

in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place.

Is there anything I can set to do that?

If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv

Code:

.ParentDiv {
	position: relative;	
	width: 100%;		          
	width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
	min-width:997px;
	max-width:100%;
	overflow:hidden;
	min-height: 400px;
}
.ChildDiv {
	position: relative;	
	width: 100%;
	min-height: 400px;
}
.menuholder {
  background-color: #EFF3F5;
  color: #eef;
  position: relative;
  float: left;
  left: 0px;
  top: 0px;
  overflow: hidden;
  width: 160px;
  z-index: 100;
}

Basically, #bodycont has a background.
When I type text into this div, it expands and the background is show.

However when I put the divs menu and news into it the background doesn't show.

I've had this problem before but I can't remember how to fix it

html4strict Code:
Original - html4strict Code <div id="bodycont"> <div id="menu"> <img src="imgs/menutop.png" /> </div> <div id="news"> wefwef </div> </div>

  

  


  


 <div id="bodycont"> 


      <div id="menu">


             <img src="imgs/menutop.png" />


         </div>


         


         <div id="news">


         wefwef


         </div>


     </div>


  

css Code:
Original - css Code #bodycont { background-image:url(../imgs/background.jpg); width:100%; height:auto; } #menu { width:245px; float:left; } #news{ width:545px; height:auto; float:right; }

  

  


 #bodycont {


 background-image:url(../imgs/background.jpg);


 width:100%;


 height:auto;


 }


 #menu {


 width:245px;


 float:left;


 }


 #news{


 width:545px;


 height:auto;


 float:right;


 }


  

I'm redoing the layout of my site (www.brohawk.com) using floating divs with negative margins to produce a fluid left column and a fixed right column. I followed an article on A List Apart for the basics and got it working fairly nicely.

As a matter of fact, the site works beautifull in Mozilla/Firefox and with minmal errors in NS7. I've even got all but the forums working in Opera. I haven't even begun to work on making it IE compliant. Saving the worst for last.

Anyhow, on all the pages except the forums, the divs line up perfectly. However, on the forums page, the right div doesn't stay up top, instead it wraps around under the left div. However, I still get all the space to the right of the left div where the right one should go.

Anybody with Opera should be able to check it out and see what I mean.

Anyhow, can anybody tell me why it won't float properly on that one page, but it works on all the others?

I've been beating my head against the wall over this problem for two nights now.

I'm working on our new site and everything is formatting well across all major browsers. But when I go to print the page, the results are less than desirable, except for Opera on my Mac. For some reason that browser handles floating divs great. But Safari, Firefox 3 and IE 7 all barf on the divs.

Particularly, if the text in my main content area exceeds a page length, the remaining text displayed on subsequent pages is displayed down the page and not at the top like one would expect. Another problem is that sometimes the first page will just show me the header and menu of my content and will begin displaying the main content on the second page.

I've played around with clearing floats when printing but this just re-arranges the divs and of course overlaps with other floats.

Could one of you experts please take a look at this page in particular and the accompanying main.css file and tell me a quick way to prevent this with using just css attributes.

An example page is he www proterraonline com / dev / team.asp

While I have a print css linked in the source of the html, the code is the same as in the main.css at the moment.

Here's a link to the css file to make life a little easier.
www proterraonline com / dev / css / main.css

Thanks.

The problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box.

I'm new to inserting code, but I'll give it a try:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN"
    

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>linking to style sheets 2</title>

<style type="text/css">

body {
background-color: #ccccff;

}

h1 {
font: bold 20px arial, tahoma, verdana;
color: #6633ff;
border-bottom: 1px solid #444444;
margin: 25px 0;
padding: 5px;
}

p {
font: 15px verdana;
line-height: 1.5em;
color: #000077;
margin: 0;
padding: 0;
}

.leftbox {
width: 300px;
background-color: #ffffff;
padding: 10px;
margin: 10px 10px;
float: left;
}

.rightbox {
width: 300px;
padding: 10px;
margin: 10px 10px;
background-color: #000000;
}

.wrapper {
width: 800px;
background-color: #ff0000;
}

.end {
clear: both;
}

</style>

</head>

<body>

<div class="wrapper">

<div class="leftbox">

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 

lorem. Fusce nec massa id erat lobortis semper. Vestibulum 

dignissim orci et orci. Fusce quis tortor eu sapien gravida 

pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 

suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 

augue. </p>

</div>

<div class="rightbox">

<h1>Heading 1</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Cras pede sem, lobortis tempus, sodales sed, vehicula vitae, 

lorem. Fusce nec massa id erat lobortis semper. Vestibulum 

dignissim orci et orci. Fusce quis tortor eu sapien gravida 

pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque 

suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque 

augue. </p>

</div>

<div class="end"></div>

</div>


</body>

</html>

You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help?

P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes

http://www.ctr.usf.edu/gallery/

When the window is resized and there is an image in the middle window then the right panel over laps it. Is there a way to lock them in so they will not do that.

I know the page has errors, I have to keep the top part on there.

style sheet : http://www.ctr.usf.edu/gallery/style.css

I need to know what attributes to give to my container div in order for this to work correctly. I have a div and within it are many floating divs, each that contain an image thumbnail and caption. I do it this way so the images fit on the page dynamically and it works great. Unfortunately the container div does not wrap around the height of the images. This causes content that should appear below the images to show up behind them. How do I make the container div actually stretch around all the child divs?

here is a code sample
Code:

<div style="border: 1px solid blue; width: 100%; display : inline;">

<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0003.jpg" rel="lightbox[post182]" title=" size 84k"><img border="1" src="/images/media/thumbs/182_YachtClub_0003.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0004.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0004.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0006.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0006.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0007.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0007.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0011.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0011.jpg" alt="" /></a><br/></div>

<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0012.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0012.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0013.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0013.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0015.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0015.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0016.jpg" rel="lightbox[post182]" title=" size 68k"><img border="1" src="/images/media/thumbs/182_YachtClub_0016.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0019.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0019.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0020.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0020.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0021.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0021.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0022.jpg" rel="lightbox[post182]" title=" size 36k"><img border="1" src="/images/media/thumbs/182_YachtClub_0022.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0026.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0026.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0028.jpg" rel="lightbox[post182]" title=" size 50k"><img border="1" src="/images/media/thumbs/182_YachtClub_0028.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0030.jpg" rel="lightbox[post182]" title=" size 52k"><img border="1" src="/images/media/thumbs/182_YachtClub_0030.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0031.jpg" rel="lightbox[post182]" title=" size 54k"><img border="1" src="/images/media/thumbs/182_YachtClub_0031.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0032.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0032.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0033.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0033.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0034.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0034.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0035.jpg" rel="lightbox[post182]" title=" size 51k"><img border="1" src="/images/media/thumbs/182_YachtClub_0035.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0037.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0037.jpg" alt="" /></a><br/></div>

<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0038.jpg" rel="lightbox[post182]" title=" size 61k"><img border="1" src="/images/media/thumbs/182_YachtClub_0038.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0039.jpg" rel="lightbox[post182]" title=" size 30k"><img border="1" src="/images/media/thumbs/182_YachtClub_0039.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0040.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0040.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0041.jpg" rel="lightbox[post182]" title=" size 45k"><img border="1" src="/images/media/thumbs/182_YachtClub_0041.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0042.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0042.jpg" alt="" /></a><br/></div>
<div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0044.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0044.jpg" alt="" /></a><br/></div>

</div>

I am a bit lost as to how to accomplish the following:

I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one.

I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div.

Any ideas?