Geek asks and answers

Two dividers next to each other without fixed width elements

I am currently overwhelmed by the vast number of questions available on the topic "two divs next to each other." Since I am trying to create the same thing that I read for hours now and trying every solution that I can use Google. But to no avail. Therefore, I hope the SO user base can help me.

I have 2 divs one with a title (logo), which can be of any size (clients upload their own logo). And one more div with navigation (menu), which was also configured by the client itself. Since clients create content (logo + menu), I cannot set the width element to px or another (as far as I know).

I want to make sure that the title of the div is just as large so that it matches the logo (image) or logo (text). And that navigation fills all other available places on the right.

See this script: http://jsfiddle.net/nSY4P/

Thanks for the help in advance.

<style>
.head-area{width:100%;}
.header{float:left;background:#fe0000;}
.navigation{float:left;background:#feda08;}
.head-area{clear:both;}
</style>

<div class="head-area">
 <div class="header">CLIENT LOGO</div>
 <div class="navigation">ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div>
 <div class="head-area-clear"></div>
</div>
+3
source share
7 answers

No need to use display: flexand display: table-cell.

Just delete the .navigationfloating one and it will fill all the remaining space:

.head-area{width:100%; overflow:hidden;}
.header{float:left;background:#fe0000;}
.navigation{overflow:hidden; background:#feda08;}
.head-area{clear:both;}

Demo

+4
source

The simplest would be replaced float:left;on width:100%;at.navigation

See FIDDLE

If .logo+ .navigationshould be wide for its container, it .navigationwill be displayed on two lines.

+2
source

, .navigation , . (.header) overflow-x: hidden; .navigation, , :

.header {
    float:left;
}

.navigation {
    overflow-x: hidden;
}

.navigation , width: 100%;.

.

overflow-x: hidden;, .navigation . , .

+2

floats display:table display:table-cell.

<div class="head-area">
 <div class="header">CLIENT LOGO</div>
 <div class="navigation">ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div>
</div>

css:

.head-area{width:100%; display: table;}
.header{display: table-cell;background:#fe0000;}
.navigation{display:table-cell;background:#feda08;}

http://jsfiddle.net/nSY4P/2/

+1

FIDDLE

, width:1% .cell:nth-child(1) , .

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>Logo</div>
        <div class='cell'>Item</div>
        <div class='cell'>Item</div>
    </div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    background:#feda08;
}
.cell:nth-child(1) {
    background:red;
    width:1%;
}
+1

Use the new CSS3 flexible layout (no need for float, no need for a clean float, automatic adaptation. More information here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ):

Working fiddle: http://jsfiddle.net/nSY4P/5/

HTML:

<div class="head-area">
    <div class="header">CLIENT LOGO</div>
    <div class="navigation">ITEM 1 | ITEM 2 | ITEM 3 | ITEM 4 | ITEM 5</div>
</div>

CSS

.head-area {
    display: flex;
    flex-direction: row;
}
.header {
    background:#fe0000;
}
.navigation {
    background:#feda08;
    flex: auto;
}
+1
source

I have been looking for this strange problem for hours. for the solution, it was easy to set an overflow: hidden to navigate the div :)

0
source

More articles:


All Articles