Half-half css layout padding and positioning problem
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.
加载中,请稍侯......
精彩评论