Jump to content

Two floats and a center.

Aucun

By Aucun
in CSS

 Share

Recommended Posts

Aucun Newbie

Aucun

Posted
Posted (edited)

I'm trying to get two side and a center for this page. After googling how to have an object in the center take the remaining width, I came across this weird problem. The center is placed down from the top, unlike the two sides. Here is the code I'm working with right now:

<html>	<body>		<div id="main-container">			<div class="main-left-box">				<div class="main-title">					<p class="main-title">Box #1</p>				</div>				<div class="main-body-center">					<p>This is box #1</p>				</div>			</div>			<div class="main-right-box">				<div class="main-title">					<p class="main-title">Box #2</p>				</div>				<div class="main-body">					<p>This is box #2</p>				</div>			</div>			<div class="main-left-box">				<div class="main-title">					<p class="main-title">Box #3</p>				</div>				<div class="main-body-center">					<p>This is box #3</p>				</div>			</div>			<div class="main-center-box">				<div class="main-center-title">					<p class="main-title">Why is this not aligned with the rest?</p>				</div>			</div>		</div>	</body>	<style>		#main-container		{			width:90%;			min-width:976px;			background-color:grey;			margin-left:auto;			margin-right:auto;			border-radius:5px;			border:2px solid rgb(160, 160, 160);			overflow:auto;			padding-top:15px;		}		div.main-left-box		{			width:240px;			padding:10px;			margin-top:-39px;			float:left;			clear:left;		}		div.main-right-box		{			width:240px;			padding:10px;			margin-top:-39px;			float:right;			clear:right;		}		div.main-title		{			width:240px;			height:35px;			background-color:rgb(60, 60, 60);			border-radius:10px;			text-align:center;		}		p.main-title		{			color:white;			padding-top:5px;			text-decoration:underline;		}		div.main-body		{			width:220px;			background-color:rgba(220, 220, 220, 0.6);			margin-top:2px;			border-radius:10px;			padding:10px;		}		div.main-body-center		{			width:220px;			background-color:rgba(220, 220, 220, 0.6);			margin-top:2px;			border-radius:10px;			padding:10px;			text-align:center;		}		div.main-center-box		{			overflow:hidden;		}		div.main-center-title		{			height:35px;			background-color:rgb(60, 60, 60);			border-radius:10px;			text-align:center;		}	</style></html>

I'm not sure why it's doing this, and I can't find a good example when searching for this problem.

Edited by Aucun
Link to comment
Share on other sites
Hadien Member

Hadien

Posted
Posted (edited)

the padding-top and margin-top for the "center" don't match the "sides". you had the container have padding, and then gave the sides negative margins, so the container pushed everything down, and then the sides shifted themselves back up. remove all the padding margin-tops and change paddings to something like padding: 10px 0px; 

	<style>		#main-container		{			width:90%;			background-color:grey;			margin-left:auto;			margin-right:auto;			border-radius:5px;			border:2px solid rgb(160, 160, 160);			overflow:auto;			padding-top:15px;		}		div.main-left-box		{       /*removed margin-top and padding*/			width:20%;			float:left;			clear:left;		}		div.main-right-box		{       /*removed margin-top and padding*/			width:20%;			float:right;			clear:right;		}		div.main-title		{			width:100%;			height:35px;			background-color:rgb(60, 60, 60);			border-radius:10px;			text-align:center;		}		p.main-title		{			color:white;			padding-top:5px;			text-decoration:underline;		}		div.main-body		{			width:100%;			background-color:rgba(220, 220, 220, 0.6);			margin-top:2px;			border-radius:10px;                        padding: 10px 0px; /*changed side paddings so they're flush with headers*/		}		div.main-body-center		{			width:100%;			background-color:rgba(220, 220, 220, 0.6);			margin-top:2px;			border-radius:10px;			padding:10px 0px;/*changed side paddings so they're flush with headers*/			text-align:center;		}		div.main-center-box		{			overflow:hidden;		}		div.main-center-title		{			height:35px;			background-color:rgb(60, 60, 60);			border-radius:10px;			text-align:center;		}	</style>
Edited by Hadien
Link to comment
Share on other sites
Aucun Newbie

Aucun

Posted
  • Author
Posted

The reason I had negative values on the side boxes was to move it up more, and I also wanted the middle to move up more. Adding margin values to the middle makes it mess up. How would I move the middle one up -35px with the sides? Thanks for the help so far.

Link to comment
Share on other sites
Hadien Member

Hadien

Posted
Posted (edited)

if its still not flush with the top of the container then change this class, again with the removal of padding-top in container and padding/margin-tops in the sides.

p.main-title{	color:white;	padding-top:5px;	text-decoration:underline;	margin-top:0px;}

p tags by default have 1em margins above and below. its probably because you've made div.main-title only 35px high, that the inside p tags are overflowing their top margins into the container, offsetting the sides. the center div won't need it's margin messed with at all.

 

normally a <p> tag's margins shouldn't be rendered outside their parent tag, but then again float/clear weren't intended for use on block elements either.

 

edit: if you want to push the center div even further up, past the container's border without demolishing it's width. Add to .main-center-box class position: relative, and top: -20px (however much you need). try to avoid messing with the "position" styling if there are other ways to can do it. having too many non-static positioned elements can quickly get confusing to keep track of and clutter up a page.

Edited by Hadien
Link to comment
Share on other sites
Hadien Member

Hadien

Posted
Posted

not font, the <p> tag. 1 em is equivalent to the current font-height in context. if a font is 12px high, then 1em = 12px. but if font size is 40px, then 1em is 40px.

 

with the font in your p tag being say, 18px, the there will be an 18px margin above and below that p tag and then the height of the p tag itself which is about 23px.now like in that class snippet i just gave you, setting the margin-top for these specific p tags to 0 will remove the 1em spacing above them.

 

another tag you could use instead is a <span> tag. spans are pure inline-level elements, unlike the p tags which are block-level elements. and unlike the p tags, span will come without the large 1em margins above and below, and won't set consecutive text over multiple lines (downside is that you can't control the width or height of a span, then again you shouldn't need to).

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

It is caused by margins of paragraph seeping beyond the edges of parent elements with no margins or margins lower than the child paragraph element, this is known as collapsing margins.

 

To fix you should apply overflow: hidden to the parent element.

 

this should show how they should look, with overflow: hidden applied and height restriction removed.

    #main-container            {                width:90%;                min-width:976px;                background-color:grey;                margin-left:auto;                margin-right:auto;                border-radius:5px;                border:2px solid rgb(160, 160, 160);                overflow:auto;                padding:10px;/* amended ds*/            }            div.main-left-box            {                width:240px;                /* padding:10px;*/              /*  margin-top:-39px;*/                float:left;                clear:left;                 }            div.main-right-box            {                width:240px;               /*padding:10px;*/                /* margin-top:-39px;*/                float:right;                clear:right;                            }            div.main-title            {                width:240px;                /*height:35px;*/                background-color:rgb(60, 60, 60);                border-radius:10px;                text-align:center;                overflow:hidden; /*ds*/                line-height: 35px; /*ds*/            }            p.main-title            {                color:white;                /*padding-top:5px;*/                text-decoration:underline;                            }            div.main-body            {                width:220px;                background-color:rgba(220, 220, 220, 0.6);                margin-top:2px;                border-radius:10px;                padding:10px;            }            div.main-body-center            {                width:220px;                background-color:rgba(220, 220, 220, 0.6);                margin-top:2px;                border-radius:10px;                padding:10px;                text-align:center;            }            div.main-center-box            {                overflow:hidden;                line-height: 35px; /*ds*/                 padding:0 10px;/*ds*/             }            div.main-center-title            {                /*height:35px;*/                background-color:rgb(60, 60, 60);                border-radius:10px;                text-align:center;                overflow:hidden;/*ds*/             }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...