Half-half css layout padding and positioning problem_问答_开发者

Half-half css layout padding and positioning problem

开发者 https://www.devze.com 2023-02-21 13:58 出处：网络

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 middl开发者_开发技巧e of the screen.

相关专题：css layout

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 middl开发者_开发技巧e 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!

@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

To remove the 'white border' around the divs you can apply:

body {
    padding: 0;
}

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