CODEWITHSUNDEEP
csshtmlalignment
joju
joju

Reputation: 11

Why won't my divs align horizontally?

Problem i cannot figure. I have a very simple page layout. Two div inside a container. The Div at the top, div "navigation-block", contains a ul and li's for a menu. From the CSS you will see it has a width of 30%. The div "bio" which is currently below the "navigation-block" div has a width of 30%.

All i want is for the "bio" div to float to the right of the "navigation-block" div. I've ensured there is no clear:both or clear:right on the "navigation-block". Ive tried float:left and float:right on the "bio" div and display:inline, but no joy what am i missing.

Html is straightforward, and no mistakes ive checked.

CSS below

.gridContainer {
position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;   
}

#bio {
width: 30%;
height:auto;
background-color: rgba(256,256,256,0.2);
color: rgba(256,256,256, 0.8);
text-align: center;
border: 1px solid white;
}

#navigation-block {
position:relative;
width:30%;  
}

the below is the rest of the menu CSS

ul#sliding-navigation
{
list-style: none;
font-size: .75em;
padding: 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 60%;
padding: 2% 2%;
margin: 0;
margin-bottom: 1%;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;

}

ul#sliding-navigation li.sliding-element h3
{
color: rgba(0, 0, 0, 0.8); 
background-color: rgba(256, 256, 256, 0.6);
font-weight: normal;
border: 1px solid white;

}

ul#sliding-navigation li.sliding-element a
{
color: #000;
background-color: rgba(256, 256, 256, 0.4);
text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: rgba(256, 256, 256, 0.8); }


<body>
<div class="gridContainer clearfix">

 <div id="navigation-block">
        <ul id="sliding-navigation">
            <li class="sliding-element"><h3>Zion City Limits</h3></li>
            <li class="sliding-element"><a href="Index.html">Home</a></li>
            <li class="sliding-element"><a href="#">Danny</a></li>
            <li class="sliding-element"><a href="#">Dylan</a></li>
            <li class="sliding-element"><a href="#">Bill</a></li>
            <li class="sliding-element"><a href="#">Rich</a></li>
            <li class="sliding-element"><a href="#">John</a></li>
        </ul>
   </div>

<div id="bio">This is the content for Layout Div Tag </div>
</div>
</body>

Any Help appreciated

thanks

Upvotes: 1

Views: 3079

Answers (2)

Christopher
Christopher

Reputation: 75

I know this is an old post but to help the next person that comes across this post.

display: inline-block;

This must be used for aligning divs inside of other divs when the parent div's height is not static.

Upvotes: 1

Maroshii
Maroshii

Reputation: 4027

Two options here...

 #bio, #navigation-block {
   ...
   display:inline-block
}

or:

#bio, #navigation-block {
   ...
   float: left
}

divs are block level elements and won't position next to each other by default

Upvotes: 0

Related Questions