Half-half css layout padding and positioning problem

Question

Greetings,

I am trying to create a simple two-column layout: left half one colour, right half another colour with all the text aligned to the middle of the screen.

I have two problems I cannot find obvious solutions for (my css skills are poor):

White border around the divs.
When I introduce text padding to the columns they get bigger, cannot fit next to each other and the right column collapses under the left.

Here is the current css:

#left {
float:left;
width:50%;
height: 100%;
background-color:orange;
color:black;
text-align:right;
}
#right {
float:right;
width:50%;
height: 100%;
background-color:black;
color:orange;
}

Here is html:

<html lang="en">
<head>
<title>Tucolor</title> 
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="left">bleh</div>
<div id="right">mleh</div>    
</body>
</html>

Thank you alot!

Answer 1

@rince

for white border just write

body{
    margin:0;
    padding:0;
}

or use reset sheet because some browser gave default padding to the body

&

2 . if you given padding to the column or any object it's add width to it so,decrease height & width according to the padding .

for example : if width:100px; & when we add padding-left:10px; to it .Then we written width:90px; instead of 100px

Answer 2

To remove the 'white border' around the div s you can apply:

body {
    padding: 0;
}

and to allow for padding within the div s, I'd suggest wrapping the text in p tags, and applying either a margin (JS Fiddle demo) , or padding (JS Fiddle demo) , to those.

Half-half css layout padding and positioning problem

Question

2 answers

solution1
2 2011-04-03 16:23:34

solution2
1 ACCPTED 2011-04-03 16:22:43

Half-half css layout padding and positioning problem

Question

2 answers

solution1 2 2011-04-03 16:23:34

solution2 1 ACCPTED 2011-04-03 16:22:43

solution1
2 2011-04-03 16:23:34

solution2
1 ACCPTED 2011-04-03 16:22:43