How do I do 4 boxes one next to each other with 4 pixels padding in between?
I tried:
<div style="width: 120px; float: left; padding-right: 4px;">box 1</div>
<div style="width: 120px; float: left; padding-right: 4px;">box 2</div>
<div style="width: 120px; float: left; padding-right: 4px;">box 3</div>
<div style="width: 120px; float: left; padding-right: 4px;">box 4</div>
It doesn't work well.try<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
}
</style></head>
<body>
<div style="width: 120px; float: left; margin-right: 4px;margin-bottom:4px;">box 1</div>
<div style="width: 120px; float: left;">box 2</div>
<div style="width: 120px; clear:both; float: left; margin-right: 4px;">box 3</div>
<div style="width: 120px; float: left;">box 4</div>
</body>
</html>4 pixels padding in betweenPadding is inside the box, margins are outside. Hence bathurst_guy's styling.code
<html>
<head>
<style type="text/css">
div#smallBox {
width:120px;
height:120px;
border: 1px solid #000000;
float:left;
margin-left:4px;
}
</style></head>
<body>
<div class="smallBox">1</div>
<div class="smallBox">2</div>
<div class="smallBox">3</div>
<div class="smallBox">4</div>
</body>
</html>
/edit - that would make the inside measurement of the boxes equal to 120px not including the border. If you wanted the total size including the border to 120 you would have to subtract from the width accordingly.
also if you wanted to continue under the boxes it would be best to use (CSS) clear:both; i.e.
<html>
<head>
<style type="text/css">
div.smallBox {
width:120px;
height:120px;
border: 1px solid #000000;
float:left;
margin-left:4px;
padding:0px
}
div.container {
clear:both
}
</style></head>
<body>
<div class="container">
<div class="smallBox">1</div>
<div class="smallBox">2</div>
<div class="smallBox">3</div>
<div class="smallBox">4</div>
</div>
<div class="container">
<div class="smallBox">5</div>
<div class="smallBox">6</div>
<div class="smallBox">7</div>
<div class="smallBox">8</div>
</div>
</body>
</html>code
id must be unique! use classThanks, I didn't know that.
I've not been adhering to that rule when I code CSS. I will in future.
I don't want to sound contrary, but could I ask why? For all intents and purposes (at least as far as my pages have been concerned) they seem to do the same thing.This (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.2">http://www.w3.org/TR/html401/struct/global.html#h-7.5.2</a><!-- m -->) and also this (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/types.html#type-id">http://www.w3.org/TR/html401/types.html#type-id</a><!-- m -->)
Generally the css will be applied to the elements, but there is no guarantee it will in all browsers or in future versions.
You will have problems in referencing these elements with the DOM in conforming browsers.
I tried:
<div style="width: 120px; float: left; padding-right: 4px;">box 1</div>
<div style="width: 120px; float: left; padding-right: 4px;">box 2</div>
<div style="width: 120px; float: left; padding-right: 4px;">box 3</div>
<div style="width: 120px; float: left; padding-right: 4px;">box 4</div>
It doesn't work well.try<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
}
</style></head>
<body>
<div style="width: 120px; float: left; margin-right: 4px;margin-bottom:4px;">box 1</div>
<div style="width: 120px; float: left;">box 2</div>
<div style="width: 120px; clear:both; float: left; margin-right: 4px;">box 3</div>
<div style="width: 120px; float: left;">box 4</div>
</body>
</html>4 pixels padding in betweenPadding is inside the box, margins are outside. Hence bathurst_guy's styling.code
<html>
<head>
<style type="text/css">
div#smallBox {
width:120px;
height:120px;
border: 1px solid #000000;
float:left;
margin-left:4px;
}
</style></head>
<body>
<div class="smallBox">1</div>
<div class="smallBox">2</div>
<div class="smallBox">3</div>
<div class="smallBox">4</div>
</body>
</html>
/edit - that would make the inside measurement of the boxes equal to 120px not including the border. If you wanted the total size including the border to 120 you would have to subtract from the width accordingly.
also if you wanted to continue under the boxes it would be best to use (CSS) clear:both; i.e.
<html>
<head>
<style type="text/css">
div.smallBox {
width:120px;
height:120px;
border: 1px solid #000000;
float:left;
margin-left:4px;
padding:0px
}
div.container {
clear:both
}
</style></head>
<body>
<div class="container">
<div class="smallBox">1</div>
<div class="smallBox">2</div>
<div class="smallBox">3</div>
<div class="smallBox">4</div>
</div>
<div class="container">
<div class="smallBox">5</div>
<div class="smallBox">6</div>
<div class="smallBox">7</div>
<div class="smallBox">8</div>
</div>
</body>
</html>code
id must be unique! use classThanks, I didn't know that.
I've not been adhering to that rule when I code CSS. I will in future.
I don't want to sound contrary, but could I ask why? For all intents and purposes (at least as far as my pages have been concerned) they seem to do the same thing.This (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.2">http://www.w3.org/TR/html401/struct/global.html#h-7.5.2</a><!-- m -->) and also this (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/types.html#type-id">http://www.w3.org/TR/html401/types.html#type-id</a><!-- m -->)
Generally the css will be applied to the elements, but there is no guarantee it will in all browsers or in future versions.
You will have problems in referencing these elements with the DOM in conforming browsers.