gwiz_kid gwiz_kid - 25 days ago 6
CSS Question

Trying to build three adjacent div columns within a div wrapper. The div columns have equal width but one always gets pushed below the other two

<html lang="en">
<meta charset="utf-8" />

<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>

<body>

<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
<a href="#block_two">Home</a>
<a href="#block_three">About Us</a>
<a href="#end_block">Contact Us</a>
<a href="#block_four">Events</a>
<a href="Member Login">login</a>
</nav>
</div>
</header>

<div id="block_two">
<p></p>
</div>

<div id="block_three">

<div id="column-center">
<header>
Column center
</header>
</div>

<div id="column-left">
<header>
Column left
</header>
</div>

<div class="column-right">
<header>
Column right
</header>
</div>
</div>

<div id="block_four">
<p> Block Four </p>
</div>


<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>

</body>

</html>


Here is the css

html {
overflow: hidden;
}

body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;

}

div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;

}

div#static_nav a{
color: white;
text-decoration: none;
}

.navbar {
padding-right: 20px;
padding-top: 10px;
}

div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}

div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}

div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}


These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.

div#column-left{
float: left;
width: 33%;
}

div#column-right{
float: right;
width: 33%;
}

div#column-center{
display: inline-block;
width: 33%;
}

div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}

div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}

Answer

Try to add these settings:

* {
  box-sizing: border-box;
}
html {
  margin: 0;
}

You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.

EDIT/ADDITION:

I just noticed you float settings on those colums - not good... ;-)

Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)

div#column-left {
   float: left;
   width: 33%;
   }
div#column-right {
   float: left;
   width: 33%;
   }
div#column-center {
   float: left;
   width: 33%;
}