/    Sign up×
Community /Pin to ProfileBookmark

Simple boxes…

Copy linkTweet thisAlerts:
Jan 25.2006

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.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@bathurst_guyJan 25.2006 — try&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
div {
border:1px solid #000;
}
&lt;/style&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div style="width: 120px; float: left; margin-right: 4px;margin-bottom:4px;"&gt;box 1&lt;/div&gt;
&lt;div style="width: 120px; float: left;"&gt;box 2&lt;/div&gt;
&lt;div style="width: 120px; clear:both; float: left; margin-right: 4px;"&gt;box 3&lt;/div&gt;
&lt;div style="width: 120px; float: left;"&gt;box 4&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@ray326Jan 25.2006 — 4 pixels padding in between[/QUOTE]Padding is inside the box, margins are outside. Hence bathurst_guy's styling.
Copy linkTweet thisAlerts:
@bolJan 25.2006 — 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>[/QUOTE]

/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>[/QUOTE]
Copy linkTweet thisAlerts:
@FangJan 25.2006 — code[/QUOTE]
[I]id[/I] must be unique! use [I]class[/I]
Copy linkTweet thisAlerts:
@bolJan 25.2006 — Thanks, 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.
Copy linkTweet thisAlerts:
@FangJan 25.2006 — [URL=http://www.w3.org/TR/html401/struct/global.html#h-7.5.2]This[/URL] and also [URL=http://www.w3.org/TR/html401/types.html#type-id]this[/URL]

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.
×

Success!

Help @weee spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...