/    Sign up×
Community /Pin to ProfileBookmark

Please help me understand CSS positioning.

Copy linkTweet thisAlerts:
May 31.2009

I am trying to make a template that has a header and then a 3 row, 2 column table on a page, something like this (without the silly spaces):

HEADER

BOX1 BOX2
BOX3 BOX4
BOX5 BOX6

Can someone point me in the right direction as I am just learning CSS. I can figure out how to position the header, but don’t know how to get the 2 boxes beside each other centered horizontally on the page.

Thanks!
Marie

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@domainsvaultMay 31.2009 — [CODE]<style type="text/css">
.box_container{
width:400px;
margin:0;
padding:0;
background:#00ff00;
}
.box1{
width:200px;
margin:0;
padding:0;
background:#990000;
float:left;
}
.box2{
width:200px;
margin:0;
padding:0;
background:#FF0000;
float:left;
}
</style>

<div class="box_container"><div class="box1">left</div><div class="box2">right</div></div>
<div class="box_container"><div class="box1">left</div><div class="box2">right</div></div>
<div class="box_container"><div class="box1">left</div><div class="box2">right</div></div>[/CODE]

Maybe? Im still kinda fresh to CSS myself, having a hard time conforming from table based layout to css based layouts. But if I were to make an attempt at something like what you are talking then, that would be my attempt. Although I know in CSS3 there is a table like set of definitions either I am sure will work. But the above is worth a shot.
Copy linkTweet thisAlerts:
@DrMarieauthorMay 31.2009 — Thanks domains, but that seems to print the boxes one underneath the other (i.e. vertically). I need to know how to put two boxes next to each other horizontally.
Copy linkTweet thisAlerts:
@DrMarieauthorMay 31.2009 — OK, I got the first two boxes to go side to side. I think I can figure the rest out from here. Just in case it helps anyone else, here is what I used:

[CODE].header {
width:827px;
height:211px;
margin-left: auto;
margin-right:auto;
margin-top:50px;
}

.box_container{
width:827px;
margin-left: auto;
margin-right: auto;
padding:0;
}


.leftupper {
margin-top: 0px;
padding:0;
border:3px solid #000000;
width: 408px;
height: 300px;
background-color: #ffffff;
float: left;
}

.rightupper {
width:407px;
height: 300px;
margin-top: 0px;
padding:0;
border:3px solid #000000;
background-color: #ffffff;
float: left;
}[/CODE]
×

Success!

Help @DrMarie 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.28,
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,
)...