CODEWITHSUNDEEP
htmlcss
StrugglingCoder
StrugglingCoder

Reputation: 5021

Why inline-block is not working to align two divs inside of a parent container div horizontally side by side?

I have a simple HTML template like this 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    *{
        margin:0px;
        padding:0px;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
        border:green 2px solid;
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        background-color : red;
        width:70%;
        height:80px;
        border:black 2px solid;
        padding:5px;
    }
    #header1 {
        display:inline-block;
        width:50%;
        border:green 2px solid;

    }
    #header2 {
        display:inline-block;
        width:50%;
        border:green 2px solid;
    }
</style>
</head>
<body>
<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div>
        <div id="header2"><h1>You Get to choose better !!    </h1></div>            
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Electronics</a></li>
                <li><a href="#">Fashions</a></li>                   
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>
</body>
</html>

But when I set the width to 50% for the divs having ids as header1 and header2 they tend not to occupy the entire space of the parent container div having id header and be aligned horizontally side by side. Why is it so ? Am I missing something here ? Please explain the basics as I am a newbie to HTML and CSS.

Upvotes: 2

Views: 536

Answers (5)

Kurenai Kunai
Kurenai Kunai

Reputation: 1902

Here is the fiddle 

*{
        margin:0px;
        padding:0px;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
        border:green 2px solid;
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        overflow:hidden;
        background-color : red;
        width:75%;
        height:80px;
        border:black 2px solid;
        padding:5px;
    }
    #header1 {
        display:inline-block;
        width:35%;
        border:green 2px solid;
        background: red;
        vertical-align: top;
    }
    #header2 {
        display:inline-block;
        width:50%;
        border:green 2px solid;
        background: red;
        vertical-align: top;
    }

Upvotes: 1

pavel
pavel

Reputation: 27092

In your example, there are two problems:

The first one, you declare 50% + 4px border for each, in total these the header boxes has width > 100% (parent) and they can't be side by side.

The second one, if you remove border, between them is a space (caused by line break in your code).

You can remove white chars between them 

<div id=header1>content</div><div id=header2>content></div>

http://jsfiddle.net/z4pybf6x/

or use float instead of inline-block.

When you use float: left for both elements, don't forget to clear after, eg. adding overflow: hidden to #header.

#header {overflow: hidden}
#header1, #header2 {float: left; border: 0; width: 50%;} /* no display: inline-block needed */

http://jsfiddle.net/z4pybf6x/1/

Upvotes: 2

ketan
ketan

Reputation: 19341

First thing is remove padding from #header, then you give 2px border to both #header1 and #header2 Remove it border: 2px solid green;

And another thing is display:inline-block takes white-space in the html. So, remove whitespace between both div #header1 and #header2.

Like: <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>

Here also i give vertical-align:top to make then vertically top.

*{
        margin:0px;
        padding:0px;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
        border:green 2px solid;
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        background-color : red;
        width:70%;
        height:80px;
        border:black 2px solid;
    }
    #header1 {
        display:inline-block;
        width:50%;
        vertical-align: top;
    }
    #header2 {
        display:inline-block;
        width:50%;
    vertical-align: top;
    }
<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !!    </h1></div>            
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Electronics</a></li>
                <li><a href="#">Fashions</a></li>                   
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>

Check Fiddle.

Upvotes: 2

Akhila Prakash
Akhila Prakash

Reputation: 481

try this ..

#header {
  background-color: red;
  width: 70%;
  height: 100%;
  border: black 2px solid;
  padding: 5px;
}

U may be responsive properly .

Upvotes: 3

Dreamweaver
Dreamweaver

Reputation: 1346

#header1 {
    display:inline-block;
    width:49%;
    border:green 2px solid;
    float: left;}
    #header2 {
        display:inline-block;
        width:49%;
        border:green 2px solid;float: right    }

The width should be 49% as the border is also set to 2 px so 50% will arrange the div one below the another, and any value less than 50% will do the trick.

Upvotes: 1

Related Questions