CODEWITHSUNDEEP
css
Parth
Parth

Reputation: 519

Simple Div/CSS layout not working as expected

I am trying to create simple horizontal stack over words while playing around with CSS and I have noticed that it is impossible to stack two divs horizontally while centering one's content when other div is empty.

Here is the example in question. I tried it in chrome. http://jsfiddle.net/mncmN/

<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8);">
    <div style="text-align:center; display: inline-block;  "> <a>Summary</a>

    </div>
    <div style="text-align:center;  display: inline-block; height: 100%; border-right: solid gray 1px;"></div>
</div>

Why is that so?

To summarize, I need three things together.

1) Inline div blocks stacks horizontally

2) Text within them aligned in center(relative to parent container).

3) empty div boxes which will act as border.

Upvotes: 1

Views: 211

Answers (4)

lloan
lloan

Reputation: 1403

Here is an updated JSFIDDLE - Is that what you are looking for exactly?

<div class="container"  >

    <div class="left">1</div>

    <div class="center">2</div>

    <div class="right">3</div>

</div>

Upvotes: 2

JaisonJE
JaisonJE

Reputation: 66

Please view the sample [http://jsfiddle.net/mncmN/5/][1] . Hope this was your question? `

<div style="margin: 0px; border: solid red 1px; width:100%; border-bottom: solid 1px black;">
     <div style=" border: solid gray 1px; text-align:center; display: inline-block; "> <a>Summary</a>
    </div>
        <div style="display: inline-block; text-align:center; border: solid gray 1px;">ff </div>
        <div style="display: inline-block; text-align:center; border: solid gray 1px;"> </div>
    </div>`


      [1]: http://jsfiddle.net/mncmN/5/

Upvotes: 0

Gimmy
Gimmy

Reputation: 3911

Put this in your empty div: &nbsp;. It's a white space. The div will still look empty, but now you can set the width and the height.

Also, try to separate the CSS from the html, like in this jsFiddle: http://jsfiddle.net/WzymM/

Upvotes: 0

Nitesh
Nitesh

Reputation: 15769

It is possible.

Here is the WORKING SOLUTION

The Code:

    <div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8); display:table;">
    <div style="text-align:center; display: table-cell; background:#cccccc; vertical-align:middle; "> <a>Summary</a></div>
    <div style="text-align:center;  display: table-cell; background:gray; vertical-align:middle; height: 100%; border-right: solid gray 1px;">sdfsdfsdfsdf</div>
</div>

Upvotes: 1

Related Questions