inherit
125499
0
Nov 8, 2011 4:03:57 GMT -8
moneyman18
:-
952
June 2008
moneyman18
|
Post by moneyman18 on Nov 2, 2009 14:52:12 GMT -8
I am trying to float a couple of divs next to each other inside the wrapper div. The problem I am having is that the parent div does not stretch to the size(height) of the two floating divs.
Any clue how I can fix this so that the wrapper div is the same size of its contents?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css"><!--
#wrapper {
width: 100%;
border: 1px solid #000000;
}
.left, .right {
width: 50%;
float: left;
position: relative;
}
img.wrap {
width: 100px;
height: 100px;
float: left;
position: relative;
}
--></style>
</head>
<body>
<div id="wrapper">
<div class="left">
<img src="/image.png" alt="" class="wrap" style="border: 0;" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<div class="right">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
</div>
</body>
</html>
Thanks
|
|
inherit
130228
0
Jul 11, 2024 19:19:59 GMT -8
Charles Stover
1,731
August 2008
gamechief
|
Post by Charles Stover on Nov 2, 2009 23:26:39 GMT -8
This is a common problem, and I'd never had an answer until now when this hit me: Add <div style="clear : both;"></div> after the .right <div> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css"><!--
#wrapper {
width: 100%;
border: 1px solid #000000;
}
.left, .right {
width: 49.9%;
position: relative;
}
.left { float: left; }
.right { float : right; }
img.wrap {
width: 100px;
height: 100px;
float: left;
position: relative;
}
--></style>
</head>
<body>
<div id="wrapper">
<div class="left">
<img src="/image.png" alt="" class="wrap" style="border: 0;" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<div class="right">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<div style="clear : both;"></div>
</div>
</body>
</html> |
|
inherit
125499
0
Nov 8, 2011 4:03:57 GMT -8
moneyman18
:-
952
June 2008
moneyman18
|
Post by moneyman18 on Nov 3, 2009 4:54:10 GMT -8
Thats perfect!
May I ask why you changed the width of the two div's to 49.9%? Not that the .2% lost will be any different but I like to know things.
|
|
inherit
130228
0
Jul 11, 2024 19:19:59 GMT -8
Charles Stover
1,731
August 2008
gamechief
|
Post by Charles Stover on Nov 3, 2009 11:03:51 GMT -8
For some reason, 50% + 50% = 100.1% in some browsers, causing the second 50%-width item to wrap to below the first. I'm not sure if it's caused by padding, margins, borders, or what, but it does, and 49.9% always seems to fix the problem. It was doing that in IE for me when I was testing your code, until I changed it to 49.9%.
Also, for width'd items, don't assign them padding or borders, 'cause that will increase the width in some browsers. If you want it to have a border or padding, put a div inside of it and assign the values to the inside div.
|
|
inherit
125499
0
Nov 8, 2011 4:03:57 GMT -8
moneyman18
:-
952
June 2008
moneyman18
|
Post by moneyman18 on Nov 3, 2009 11:52:09 GMT -8
Ah ok.
I only had the boder on there so I could seewhere it was. I don't actually plan to be using a border.
|
|
inherit
130228
0
Jul 11, 2024 19:19:59 GMT -8
Charles Stover
1,731
August 2008
gamechief
|
Post by Charles Stover on Nov 3, 2009 14:29:48 GMT -8
Ah, I hadn't looked at #wrapper. It's border may have been what was throwing it off.
|
|
