CODEWITHSUNDEEP
htmlcss
ceth
ceth

Reputation: 45325

Display inline block

I need to create layout like this:

     |  two
one  -------
     |  three

Here is my code:

<div class="group">
    <div class="name">one
    </div>
    <div class="con2">
        <div>two</div>
        <div>three</div>
    </div>    
</div>

Css:

div.group {
    background-color: #093;
}

div.name {
    background-color:#00F;
    display: inline;
}

div.con2 {
    background-color:#FF6;
    display: inline;
}

jsFiddle: http://jsfiddle.net/mkurY/

Upvotes: 0

Views: 171

Answers (5)

Filip
Filip

Reputation: 2522

I think you should float your divs instead. http://jsfiddle.net/zVjjM/

HTML

<div class="group">
    <div class="name">one</div>
    <div class="con2">
        <div>two</div>
        <div>three</div>
    </div>    
</div>

CSS

div.group {
    background-color: #093;
    overflow: auto;
}

div.name {
    background-color:#00F;
    float: left;
}

div.con2 {
    background-color:#FF6;
    float: left;
}

Upvotes: 1

kvc
kvc

Reputation: 1137

You need to use the float for the div.I have updated the code at the foll0wing link http://jsfiddle.net/mkurY/

Upvotes: 0

ptriek
ptriek

Reputation: 9286

You could use table-cell property (only for ie8+), and provide a fallback solution for ie7-:

http://jsfiddle.net/mkurY/1/

Upvotes: 2

NakedLuchador
NakedLuchador

Reputation: 991

div.name {
    background-color:#00F;
    display: inline;
    float:left;
}

div.con2 {
    background-color:#FF6;
    display: inline;
    float:left;
}

just add a height to the one as tall as the two other zones and then align center the text

Upvotes: 0

kolin
kolin

Reputation: 2344

shouldn't you consider using a table, as judging by your diagram, thats the semantically correct thing to do?

Upvotes: 1

Related Questions