Menu
A little background: I am working on a header which spans the entire with on the top of my webpage. I would like the current username, a logout button, etc. to be floated to the right in the header, and I would like the logo and some navitems to be on the left. When the browser window shrinks such that the left items and the right items collide, I do NOT want them to wrap. I have the header-container div set to overflow: auto, so I would like it to start scrolling.
The question: Even when I have a div float:left and a div float:right both with display:inline-block, and the parent with white-space:no wrap - the wrap!!! By chance I figured out I could get it to work by enclosing the yet another div also with display:inline-block. Why is this???
Below is my code and a working jsfiddle to show both the working setup, and setup which wraps. I don't understand why I need the extra div. http://jsfiddle.net/klyngbaek/tNHLL/9/
When I shrink the window, I do not want to the second blue rectangle to drop to a new line
HTML:
<h2>With extra inline-block dive. The blue rectangles do not wrap.</h2>
<div class="wrapper nowrap">
<div class="second-wrapper">
<div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div>
<div class="floating float-right">[username] | logout</div>
</div>
</div>
<h2>Without extra inline-block dive. The blue rectangles do wrap.</h2>
<div class="wrapper nowrap">
<div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div>
<div class="floating float-right">[username] | logout</div>
<div class="clearfix"></div>
</div>
CSS:
.wrapper {
border:#333;
margin-bottom:;
}
.second-wrapper {
border:;
display:inline-block;
min-width: 100%;
}
.nowrap {
white-space: nowrap;
}
.clearfix {
clear: both;
}
.floating {
background: lightblue;
border:;
height:;
padding:}
.float-left {
float: left;
}
.float-right {
float: right
}
Or perhaps there is a better way to accomplish what I want.
Thanks in advance!
edit: updated jsfiddle link
835
Example with left, right, top and bottom margins added; multiple divs; adjust height of main frame; set left margin for left most left floating div; and right margin of right most floating Div:
Result:
Styling and HTML in one file:
<html>
<body>
<style>
.row {
float:left;
border: 3px solid blue;
width: 96%;
margin-left: 2%;
margin-right: 2%;
height: 115px;
overflow: auto;
position: static;
}
.floatLeftDiv {
display: inline-block;
border: 3px solid red;
width: 200px;
height: 100px;
margin-top: 3px;
}
.right {
float: right;
border: 3px solid red;
width: 200px;
height: 100px;
margin-top: 3px;
margin-right: 1%;
}
</style>
<div class="row">
<div class="floatLeftDiv" style="margin-left: 1%;">Inline Item A:</div>
<div class="floatLeftDiv">Inline Item B:</div>
<div class="floatLeftDiv">Inline Item C:</div>
<div class="right">Inline Item D:</div>
</div>
</body>
</html>
Code modified from this discussion and another one.
148
display:inline-block effects the children of the selector. Here is updated version where removed inline-block from the child elements.
http://jsfiddle.net/ccsuP/
I'd have to see the markup of the page you are trying to layout. I'm wondering if using positioning might be the way to go.
Here check this and let me know if it helps: http://jsfiddle.net/taUgM/
* { Box-sizing: Border-box }
.wrapper {
border: 1px dashed #333;
margin-bottom: 10px;
overflow: auto;
width: 100%;
position:absolute;
}
.box{
width:50px;
height:50px;
border:1px solid yellow;
display:block;
position: relative;
}
.title-etc{
top:0;
left:0
float:left;
background:blue;
}
.login-box{
top:0;
right:0;
float:right;
background:red;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
