Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    required gap between divs

    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

    Code:
    #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

    Code:
    <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>

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    Last edited by ahallicks; 01-05-2007 at 03:48 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by blacktears View Post
    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

    Code:
    #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;}
    Code:
    #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;}
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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%>?

  • #7
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    you could read up on the box model, 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.
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by blacktears View Post
    Code:
    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.

    Quote Originally Posted by fatrat View Post
    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.

    Quote Originally Posted by fatrat View Post
    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.

    Quote Originally Posted by fatrat View Post
    Will [yo]u get <49%><5px><49%><27px>?
    Yes, if both div elements are floated to the left.

    Quote Originally Posted by fatrat View Post
    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.

    Quote Originally Posted by zro@rtv View Post
    you could read up on the box model, and i think that might clarify your confusion here.
    You might want to refer to the CSS2.1 spec instead. Itís true that itís still a working draft, but it provides needed clarifications over the original CSS2 spec.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts
    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.

  • #11
    Regular Coder
    Join Date
    Jan 2006
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well have done the margin thing and the page acts 99.9% the same in FF and IE7.

    Becka


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •