two divs next to each other with no fixed width elements

Question

I am currently stunned by the overwhelming amount of questions available on the subject "two divs next to each other". As I am trying to create the same I have been reading now for hours and trying every solution that I can Google. But with no results. So I am hoping that the SO userbase can help me.

I have 2 divs one with the header(logo) which can be any size(Clients upload their own logo). And another div with the navigation(menu) which is also been setup by the client him/herself. Because the clients create the content(logo+menu) I can't set any width element in px or other(as far as i know).

What I want to achieve is that the header div is just as big so that it fits either the logo(image) or logo(text). And that the navigation fills up all the other available space to the right.

Please see this fiddle: 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>

Just noticed, you forgot to close the last `div` in your question (may be a copy/paste mistake). I updated my fiddle with the correction — web-tiki, Feb 26 '14 at 14:27
Yes I forgot. I created this quickly because I am not allowed to use code from the production site. They are very strict about that. So I had to provide code that looks similar. And with copy paste a mistake is in a small keystroke. I have updated my original question to add the missing div. Thanks. — HennySmafter, Feb 26 '14 at 14:57
I solved the problem that you were having with your current website navigation and logo. You deleted the question? — Dhiraj, Feb 26 '14 at 17:04
That was a mistake. I am searching how to get it back. But I cant find it. Ow I found it in my list of messages. It should be undeleted now. I am sorry for that. So many thinks to do at once. I pressed the wrong delete. Needed to delete something else and ended up deleting the post that would help me. Thank you for pointing it out. Please post your solution and thanks for helping. — HennySmafter, Feb 26 '14 at 17:16
@Mimi Thank you for your comment but it is absolutely no duplicate of that question. In that question an answer can be given with fixed width fields as you can see with the chosen answer `#wrapper{width: 500px;` And I am asking to place them next to each other with no width elements. — HennySmafter, Feb 27 '14 at 12:06

score 4 · Accepted Answer · answered Feb 26 '14 at 14:27

4

No need to use display: flex nor display: table-cell.

Just remove .navigation's floating, and it will fill all remaining space:

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

Demo

answered Feb 26 '14 at 14:27

Oriol

274,082
63
437
513

2

Thank you so much for your answer. It worked like a charm. Not only the jsfiddle but also in the production site which is a little bit different than my original jsfiddle. – HennySmafter Feb 26 '14 at 14:41

web-tiki · Answer 2 · 2014-02-26T14:26:44.240

2

Simplest would be to replace float:left; by width:100%; on .navigation

See this FIDDLE

If the .logo + .navigation are to wide for their container, the .navigation will be displayed on two lines.

edited Feb 26 '14 at 14:26

answered Feb 26 '14 at 14:18

web-tiki

99,765
32
217
249

2

Thanks for you answer and it is working in the jsfiddle but on the production site it is not. This is not because of a bad answer but because of the setup of the production site. But I am really glad with your answer and will upvote it. – HennySmafter Feb 26 '14 at 14:44

score 2 · Answer 3 · answered Feb 26 '14 at 14:25

2

If you want the .navigation to fill the remaining space, you shouldn't float that element. You can float the logo (.header) and use overflow-x: hidden; for the .navigation to hid the horizontal overflow, as follows:

.header {
    float:left;
}

.navigation {
    overflow-x: hidden;
}

As .navigation is a block-level element within the document normal flow, you don't have to set width: 100%;.

Working Demo.

without using overflow-x: hidden;, .navigation will go beneath the logo. Set a background-color to verify that.

answered Feb 26 '14 at 14:25

Hashem Qolami

97,268
26
150
164

1

Your answer is clear and correct. And it is working on both the example fiddle and on the production site. I have read Oriol's answer first and selected it as the best answer. But if I could I would select both of yours as the best answer. Thank you so much for it. And thanks for the simple and short explanations. – HennySmafter Feb 26 '14 at 14:52
2

@HennySmafter Don't mention it. I'll delete this as the others' answers are good enough; Though I've answered earlier. – Hashem Qolami Feb 26 '14 at 15:10
Yes I know that the timeline is a bit ****** up. But I was called away from my desk and returned after +/- 30 minutes. On return I pressed refresh and started from the top. I am sorry for that. – HennySmafter Feb 26 '14 at 15:23

score 1 · Answer 4 · answered Feb 26 '14 at 14:18

1

You can use display:table and display:table-cell instead of floats.

<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>

And css:

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

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

answered Feb 26 '14 at 14:18

LcSalazar

16,524
3
37
69

2

After so many hours of searching to get so many good responses is unbelievable. Your solution works great in jsfiddle. It is however not working in the production site which is entirely to do with the way the production site is setup. I am upvoting your answer because it works. – HennySmafter Feb 26 '14 at 14:45
Thanks. I hope you accomplish what you want. – LcSalazar Feb 26 '14 at 14:47

score 1 · Answer 5 · answered Feb 26 '14 at 14:21

1

FIDDLE

Note that the width:1% for .cell:nth-child(1) will make sure the red 'cell' is sized to fit its content.

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%;
}

answered Feb 26 '14 at 14:21

SW4

69,876
20
132
137

2

Your jsfiddle is a work of art like many of the others. It works great. However it is not working on my production site. Which works with specific sets of codes that I cannot change. And therefore I cannot use your solution but I am sure that others can because it works brilliantly. Thank you for the time and answer. – HennySmafter Feb 26 '14 at 14:48
@HennySmafter many thanks for your comment, glad you found your solution! – SW4 Feb 26 '14 at 14:49

score 1 · Answer 6 · answered Feb 26 '14 at 14:23

1

Use the new CSS3 flex layout (no need of float, no need of clear float, automatic adapting. 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;
}

answered Feb 26 '14 at 14:23

iappwebdev

5,880
1
30
47

2

This flex layout is brilliant. I have learnt a couple of things today. And this flex approach is thanks to you. I have already fixed the difficulty with Orion's answer. But yours is great as well. I want to thank you for it and for the time you spent to educate me and provide me with this great link. – HennySmafter Feb 26 '14 at 14:56

score 0 · Answer 7 · answered Jul 07 '15 at 22:36

0

I have been searching for this strange issue for hours. the solution was simple to set overflow:hidden for navigation div :)

answered Jul 07 '15 at 22:36

coban

122
1
6

two divs next to each other with no fixed width elements

7 Answers7

FIDDLE