help with layout - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

help with layout

andre73

11:28 am on Sep 23, 2004 (gmt 0)

10+ Year Member

hi I am fairly new to this and wonder if there is anyone who could help me with this layout.

I have a container stretching from top to bottom and in it I will have several items with an image on the left and describing text to the right of it.

My problem is that the text flows around the image instead of just continuing right down as if I had the photo in a table cell and the text in another cell right next to it. Also, I would like the text to start 15px to the right of the photo not right next to it.
Any help is appreciated!
My code looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}

div#container
{
width: 710px;
height:100%;
padding:30px;
text-align: left;
background-color: #FF99CC;
}

.itemThumbNail {
background-color: #00FFFF;
display: inline;
float: left;
}
.itemText {
background-color: #00FFFF;
}
</style>

</head>

<body>
<div id="container">
<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>
</div>
</body>
</html>

Birdman

11:35 am on Sep 23, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hello,

Since you know the image width, you can set the left margin of the text to the 15px more that the image.

.itemText {
background-color: #00FFFF;
margin-left: 232px;
}

Birdman

andre73

2:09 pm on Sep 23, 2004 (gmt 0)

10+ Year Member

ok thanks for that input, now I have only one problem left, I hope, and that is in firefox the background which is now pink turns to white when I scroll. I believe the container div only stretches the height of the window and not the page, any clue on how to solve this? looks fine in IE! the code below will demonstrate the problem!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}

div#container
{
width: 710px;
height:100%;
padding:30px;
text-align: left;
background-color: #FF99CC;
}

.itemThumbNail {
background-color: #00FFFF;
display: inline;
float: left;
}
.itemText {
background-color: #00FFFF;
margin-left: 232px;
}
</style>

</head>

<body>
<div id="container">
<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>

<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>

<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>

<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>

<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>

<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>

<div class="itemThumbNail"><a href="javascript:openWindow('samples/V1_1.htm','onDisplay','status=yes,scrollbars=yes,resizable=yes,width=1000,height=700')"><img src="images/thumbV1A.gif" alt="version 1" width="217" height="163" border="0" /></a></div>
<div class="itemText">
<b>Title</b><br>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</div>
</div>
</body>
</html>

Birdman

5:13 pm on Sep 23, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Just remove the height from the #container altogether and it should be fine. Also, you may need to add the clear property to the itemThumbnail div, or you may see unexpected results when the text is shorter than the image.

div#container
{
width: 710px;
padding:30px;
text-align: left;
background-color: #FF99CC;
}

.itemThumbNail {
background-color: #00FFFF;
float: left;
clear: both;
}