2 replies [Last post]
RyanJP
RyanJP's picture
Offline
Regular
Toronto
Last seen: 2 years 39 weeks ago
Toronto
Timezone: GMT-5
Joined: 2010-08-26
Posts: 13
Points: 20

Just messing around with some drawing in CSS and found this weird error-it's kind of hard to explain so i'll just post the code, but basically my margin-top property only works when I have a border on the divs, which I don't want because it throws off the centering

HTML->

<div id="container">    
        <div id="big">
            <div class="small red">
            	<div class="small orange">
                    <div class="small blue">
                    	  <div class="small magenta"></div>
                    </div>
                </div>
            </div>
        </div>
</div>

CSS->

#container{
	width:60%;
	margin:auto;
}
 
#big{
	width:50em;
	height:50em;
 
	border:2px solid Black;
 
	margin:0 auto;
 
	background-color:Black;
 
	position:relative;
}
 
.small{
	width:50%;
	height:50%;
 
	border:1px solid black;
 
	margin:auto;
	margin-top:25%;
}
 
.red{
	background-color:red;
}
 
.orange{
	background-color:orange;
}
 
.blue{
	background-color:blue;
}
 
.magenta{
	background-color:magenta;
}

Works fine like that, but as soon as you remove the border property from the .small class, it breaks. Any insight into this is greatly appreciated!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

I can't put it together to

I can't put it together to test because I'm on my phone but my guess is you are experiencing "collapsing margins" (google that for more info).

Can you explain what you mean when you say "it breaks"?

RyanJP
RyanJP's picture
Offline
Regular
Toronto
Last seen: 2 years 39 weeks ago
Toronto
Timezone: GMT-5
Joined: 2010-08-26
Posts: 13
Points: 20

well basically instead of

well basically instead of being vertically centered each div aligns itself to the top of the previous one. The first .small div also applies it's 25% margin-top to the main div above it instead of to itself. Googling collapsing margins now. Thanks