I have 4 divs on a page that I would like horizontally next to each other.
If their combined width is more than the width of the browser window I would like them to stay next to each other horizontally and the browser become scrollable.
I can do this by putting a wrapper div around them and setting its width to 2200px for example but this isnt ideal.
Can I make them always stay on the horizonal plane without wrapping?
Should I have a wrapper with a liquid width that changes to the size of its contents, if so how?
Thanks.
Code:
<html>
<head>
<title></title>
<style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
background-color: #ffffff;
}
div.wrapper {
width: 2300px;
}
p {
margin: 0px;
padding-left: 5px;
}
div.img {
margin: 4px;
border: 0px solid #bbb;
height: auto;
width: auto;
float: left;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #bbb;
}
div.desc {
text-align: center;
font-weight: normal;
margin: 2px;
}
div.exp {
float: left;
text-align: left;
font-weight: normal;
width: 200px;
height: 620px;
margin: 2px;
background-color: #bbb;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="exp">
<strong><p>The Van.dalism Series</strong><br/><br />
All the margin properties in one declaration
This example demonstrates how to set a shorthand
property for setting all of the margin properties in
one declaration.</p>
</div>
<div class="img">
<img src="bomb.jpg" alt="VeeDoubleYou" width="339"
height="620" />
<div class="desc"><strong>VeeDoubleYou</strong></div>
</div>
<div class="img">
<img src="bomb.jpg" alt="Number38" width="339"
height="620" />
<div class="desc"><strong>VeeDoubleYou</strong></div>
</div>
<div class="img">
<img src="bomb.jpg" alt="NeeNaw" width="339"
height="620" />
<div class="desc"><strong>VeeDoubleYou</strong></div>
</div>
</div>
</body>
</html>
|
