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 1
Oldest  Newest  Rating
0 Phillip Drake · September 30, 2014
You're welcome!  Anytime!
0 Arunas Slenderis · September 30, 2014
Thank You, it worked.
+1 Phillip Drake · September 30, 2014
Ok, first, the reason your header is correctly positioned is because #logo has a fixed width: 200px and isn't set to a flexbox.  The #welcome is set to flexbox so it takes up the rest of the space available in the header element.  Second, the reason that the two divs:  #toi-desc and #ioi_description have a huge space between them is because divs only take up the space of the content plus padding and margin if no width is set so in order for those boxes to fill the gap you need to set a width in each box.  See corrections to line 25 and 88.  I hope this helps fix your issues.  Also, check out this webpage which includes a very detailed explanation of flexbox:  http://css-tricks.com/snippets/css/a-guide-to-flexbox/

*{
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: 170px;  // New value to close gap between header and main content
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: inline-box;
border: 1px solid orange;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
padding: 0px auto;
margin: 0px auto;

}
.descr {
border: 1px solid green;
padding: 0px auto;
margin: 0px auto;
-webkit-box-flex: 1;
width: 49%;  // Close gaps between divs
}
#toi_descr {
float: left;
}
#ioi_descr {
float: right;
}
0 Arunas Slenderis · September 29, 2014
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="watermark.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 message</h1>
</div>
</div>
<div id="description">
<p>
description text
<br />
more description text
<br />
even more description text
</p>
</div>
</div>
<div id="main_section" align="center">
<div id="button_descr">
<div id="toi_descr" class="descr">
<p>main section text
<br />
more text
</p>
</div>
<div id="ioi_descr" class="descr">
<p>another main section text
<br />
more 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: inline-box;
border: 1px solid orange;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
padding: 0px auto;
margin: 0px auto;

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

}
#toi_descr {
float: left;
}
#ioi_descr {
float: right;
}

Now it looks like this. Problem with button description div. its children jumps in another line when I reduce size of the browser, should just shrink
0 Phillip Drake · September 29, 2014
Please post your updated code so I can see what you are doing and help you more with your problem.
0 Arunas Slenderis · September 28, 2014
Ok I understand that, but i noticed another problem, when I reduce my browsers window these one of divs jumps into next line. I ordered them to be flexible by adding this line:
-webkit-box-flex: 1;
The do flex, but after one box jumping to another line. How to remove this line break?
0 Phillip Drake · September 28, 2014
Because when you add position:relative to a parent container, the top, left, padding, and margins are calculated around the divs and not in relation to the parent container.  I hope I didn't confuse you even more.......
0 Arunas Slenderis · September 27, 2014
Still no effect.
0 Arunas Slenderis · September 27, 2014
Ok I changed parent div display to inline-box, added relative position and floated children to left and right accordingly. It worked. But why this didn't work with with webkit-box?
0 Phillip Drake · September 27, 2014
Try setting the problem divs parent container to position: relative.  You may have to readjust your margins and padding.
  • 1
  • 2

HTML / CSS / Web Design

107,334 followers
About

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

Links
Moderators