gap between divs

+1 Arunas Slenderis · September 25, 2014
Hello, 

I have a little problem. When I align two divs horizontally using webkit a big gap appears. I reseted all margins, and paddings to zero. Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>text</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main_wrapper" align="center">
<div id="header">
<div id="top_header">
<div id="logo">
the will be logo
</div>
<div id="welcome">
<h1>Welcome</h1>
</div>
</div>
<div id="description">
<p>
text
<br />
text
<br />
text
</p>
</div>
</div>
<div id="main_section" align="center">
<div id="button_descr">
<div id="toi_descr" class="descr">
<p>text
<br />
text
</p>
</div>
<div id="ioi_descr" class="descr">
<p>text
<br />
text
</p>
</div>
</div>


<div id="the_footer">
Some text
</div>
</div>
</div>
</body>
</html>


CSS:
*{
margin: 0px;
padding: 0px;
}
body {
width: 100%;
text-align: center;
display: -webkit-box;
-webkit-box-pack: center;
}
p {
margin: 0px;
}
#main_wrapper {
max-width: 1500px;
margin: 20px auto;
display: -webkit-box;
text-align: left;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#header {
display: -webkit-box;
border: 1px solid blue;
height: 200px;
background-image: url("header_60_opacity.jpg");
-webkit-box-orient: vertical;
}
#top_header {
display: -webkit-box;
-webkit-box-orient: horizontal;
margin: 5px auto;
border: 1px solid green;
height: 80px;
}
#logo {
border: 1px solid orange;
margin: 5px;
width: 200px;
}
#welcome {
border: 1px solid red;
margin: 5px;
padding: 5px;
-webkit-box-flex: 1;
}
#welcome h1 {
text-align: center;
font-family: Tahoma;
font-weight: bold;
font-size: 25px;
color: black;
}
#description {
border: 1px solid black;
padding: auto;
margin: 5px auto;
max-height: 104px;
}
#description p {
padding-left: 5px;
text-align: center;
font-size: 18px;
font-family: Tahoma;
font-style: bold;

}
#main_section {
display: -webkit-box;
-webkit-box-orient: vertical;
border: 1px solid blue;
}
#button_descr {
display: -webkit-box;
border: 1px solid orange;
-webkit-box-orient: horizontal;
height: 200px;
-webkit-box-pack: center;
padding: 0px auto;
margin: 0px auto;

}
.descr {
border: 1px solid green;
padding: 1px auto;
margin: 0px;
-webkit-box-flex: 1;

}
#toi_descr {

}
#ioi_descr {

}


The problem is only with toi_descr and ioi_descr divs.
The header is good somehow, even that I am using same technique. How can be like that? Can anyone help me?

Thank You

Post a Reply

Replies

- page 2
Oldest  Newest  Rating
0 Phillip Drake · September 30, 2014
You're welcome!  Anytime!
0 Arunas Slenderis · September 26, 2014
Ok I made a bit easier to see :)

http://public.fotki.com/Cat-Cat/html/capture.html

The problem is with "toi_descr" and "ioi_descr" divs (green vertical line in image, should be boxes).
When I want them to be flexible and aligned horizontally, i big gap or space appears You can see it in picture.
  • 1
  • 2

HTML / CSS / Web Design

107,208 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators