How to align this html layout properly?

Question

Hi iam trying to remove these white spaces (green circles in image) , but i dont the best way to do it. Even i can do margin-left -ve value and width more than 100% but is there any way to solve this issue in proper way .

Here is my html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hachi</title>

<link rel="stylesheet" href="css/style_rec.css" type="text/css" />

</head>

<body>
<style>
#container{
font-family: "proxima-nova", Helvetica, Arial, sans-serif;
       font-weight: normal;
       color:#414141;
       -webkit-font-smoothing: antialiased;
       height: auto;
       width: 100%;

}
#header{
    width: 100%;
    height:100px;
    background-color: red;
}
#left_panel{
    width: 50%;
    float: left;
/*    height: 400px;
*/  background-color: green;
}
#right_panel{
    width: 50%;
    float: left;
/*    height: 400px;
*/  background-color: blue;
}
#bottom_logos{
    width: 100%;
    height:100px;
    background-color: yellow;
}
</style>
<div id="container">
<div id="header"></div>
<div id="left_panel">
kjjjhjfhklhhhkh
dfdsfdsfsdfdsf
</div>
<div id="right_panel">
ewrewrewrewrewr
ewrwerewrwerewr
</div>
<div id="bottom_logos"></div>
</div>

</body>
</html>

screenshot enter image description here

score 3 · Answer 1 · edited May 23 '17 at 12:27

3

Demo

body {
    margin:0;
    padding: 0;
}

Edit :

Here no need to add html { margin:0; padding:0; } as they don't have any default browser styles. From Does the <html> element have a default margin or padding in any browser, since normalize.css doesn't reset it?

edited May 23 '17 at 12:27

Community

1
1

answered Jun 18 '14 at 08:32

4dgaurav

11,074
4
30
56

@ChristophBühler : Yeah, u r right. http://stackoverflow.com/questions/19101486/does-the-html-element-have-a-default-margin-or-padding-in-any-browser-since-n – 4dgaurav Jun 18 '14 at 08:47

score 2 · Accepted Answer · answered Jun 18 '14 at 08:32

2

Those margins are part of the way the browser renders the content by default.

You can remove them by using body, html { margin: 0px; }.

I also recommend you use a CSS reset.

answered Jun 18 '14 at 08:32

Aylen

3,424
24
36

score 2 · Answer 3 · answered Jun 18 '14 at 08:35

2

Try to Reset CSS like:

html,body{margin:0; padding:0;}

or you can find full reset here

answered Jun 18 '14 at 08:35

G.L.P

7,051
4
22
40

score 1 · Answer 4 · answered Jun 18 '14 at 08:31

1

Write a CSS style for body containing padding: 0; and margin: 0;

answered Jun 18 '14 at 08:31

rhbvkleef

214
2
12

score 1 · Answer 5 · edited Jun 18 '14 at 08:40

1

Try this:

You need to declare margin: 0 for your body and html both.

http://jsfiddle.net/appleBud/MweUe/

Hope it works.

edited Jun 18 '14 at 08:40

Aylen

3,424
24
36

answered Jun 18 '14 at 08:35

AppleBud

1,479
7
29
47

How to align this html layout properly?

5 Answers5