...

View Full Version : required gap between divs



blacktears
01-05-2007, 03:39 PM
I have seen loadsa posts about not wanting a gap but I have four div squares that make a larger square and I want to have a 5px or so gap between each one but I can't figure out how to do it...

CSS



#maintext {

margin-top: -23px;
margin-left: 80px;
padding-left: 0px;
background: url("images/textbg.gif");
width: 520px;
height: 437px;
font-family: "century gothic", arial, sans-serif;
font-size: 8pt;
text-align: justify;
float: left;


}

#textbox1 {margin-top: 0px; margin-left: 0px; width: 49%; height: 30%; border: red solid 1px; display: inline; float: left;}
#textbox2 {margin-top: 0px; margin-left: 0px; width: 49%; height: 30%; border: blue solid 1px; display: inline; float: left;}
#textbox3 {margin-top: 0px; margin-left: 0px; width: 49%; height: 30%; border: orange solid 1px; display: inline; float: left;}
#textbox4 {margin-top: 0px; margin-left: 0px; width: 50%; height: 30%; border: yellow solid 1px; display: inline; float: left;}




HTML


<div id="maintext">


<div id="profiletitle">
<p>PROFILE</p>
</div>

<div id="textbox1">
</div>

<div id="textbox2">
</div>

<div id="textbox3">
</div>

<div id="textbox4">
</div>


</div>

ahallicks
01-05-2007, 03:46 PM
Put a margin on the left and bottom of the text boxes of 5px?

margin: 0px 0px 5px 5px;

Or to be more pedantic:
text box 1 needs a margin of 5px on the right and bottom
text box 2 needs a margin of 5 px on the bottom only
and text box 3 needs a margin of 5px on the right

ahallicks
01-05-2007, 03:50 PM
I have seen loadsa posts about not wanting a gap but I have four div squares that make a larger square and I want to have a 5px or so gap between each one but I can't figure out how to do it...

CSS



#maintext {

margin-top: -23px;
margin-left: 80px;
padding-left: 0px;
background: url("images/textbg.gif");
width: 520px;
height: 437px;
font-family: "century gothic", arial, sans-serif;
font-size: 8pt;
text-align: justify;
float: left;


}

#textbox1 {margin-top: 0px; margin-left: 0px; width: 49%; height: 30%; border: red solid 1px; display: inline; float: left;}
#textbox2 {margin-top: 0px; margin-left: 0px; width: 49%; height: 30%; border: blue solid 1px; display: inline; float: left;}
#textbox3 {margin-top: 0px; margin-left: 0px; width: 49%; height: 30%; border: orange solid 1px; display: inline; float: left;}
#textbox4 {margin-top: 0px; margin-left: 0px; width: 50%; height: 30%; border: yellow solid 1px; display: inline; float: left;}






#textbox1 {margin: 0px 5px 5px 0px; width: 49%; height: 30%; border: red solid 1px; display: table; float: left;}
#textbox2 {margin-bottom: 5px; width: 49%; height: 30%; border: blue solid 1px; display: tablle; float: left;}
#textbox3 {margin-right: 5px; width: 49%; height: 30%; border: orange solid 1px; display: table; float: left;}
#textbox4 {width: 50%; height: 30%; border: yellow solid 1px; display: table; float: left;}

fatrat
01-05-2007, 04:38 PM
i also would like something similar and have a question about this.

if u put the widths to 49% and the margins at 5px, will this always create boxs with a gap of 5px no matter what resolution?

ahallicks
01-05-2007, 05:20 PM
Yes, the pixels are a generic form of measurement and will always be just what it says it is whereas a percentage will proportion things according to the rest of the page measurements.

fatrat
01-05-2007, 05:26 PM
well, i meant like your setting the width to to 49%

say the containing div is 1600 wide, so 49% is 784px, and 2 of them is 1568px. If you put just 1 5px margin in the middle, that makes 1573px, where does the last 27px go?

Will the 49% divs stretch beyond 49% so the margin is only 5px between the two divs?
Will u get <49%><5px><49%><27px>?
Or <49%><5px><27px><49%>?

zro@rtv
01-05-2007, 07:49 PM
you could read up on the box model (http://www.w3.org/TR/REC-CSS2/box.html), and i think that might clarify your confusion here.

Also, why must it be 5px, is this based on some graphical layout and MUST be? I would suggest that if you are specifying the divs in % then also specify the margin in % so the math always makes sense and lines up.

Arbitrator
01-05-2007, 08:45 PM
display: inline; float: left;Using display: inline on a floated element is pointless. Floated elements are by nature block‐level, not inline, and the float property will simply override display: inline.


say the containing div is 1600 wide, so 49% is 784px, and 2 of them [are] 1568px. If you put just 1 5px margin in the middle, that makes 1573px[.] where [do] the [remaining] 27px go?It becomes 27 pixels of unused space.


Will the 49% divs stretch beyond 49% so the margin is only 5px between the two divs?The div elements will be presented exactly as you specified: with a width of 49 percent. In other words, they will honor the width you specified and will not stretch to take up the remaining space, if any.

Assuming that both boxes are floated to the left, the five pixel margin will remain five pixels. This will not be the case if the right box is floated to the right. In either case, if 49%+5px+49% ends up being too wide for its container, the right‐most box will be pushed to the next line. This is a non‐issue though if you never expect the parent box to be thinner than 250 pixels.


Will [yo]u get <49%><5px><49%><27px>?Yes, if both div elements are floated to the left.


Or <49%><5px><27px><49%>?Yes, if one div element is floated to the left, but the other div element is floated to the right.


you could read up on the box model (http://www.w3.org/TR/REC-CSS2/box.html), and i think that might clarify your confusion here.You might want to refer to the CSS2.1 spec (http://www.w3.org/TR/CSS21/box.html) instead. Itís true that itís still a working draft, but it provides needed clarifications over the original CSS2 spec.

blacktears
01-06-2007, 02:04 PM
haha, I can't believe I overlooked the margin, how stupid, it must have been a long night haha Thanks for your help guys!

Becka

BubikolRamios
01-06-2007, 02:14 PM
forget the margin,padding etc , doe's not work the same in IE,FF.
Instead make one large DIV and put your four divs inside absolutely positioned --> the apperance will be like u have margins.

But, anyway, test it for yourself.

blacktears
01-06-2007, 02:44 PM
Well have done the margin thing and the page acts 99.9% the same in FF and IE7.

Becka



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum