This is a simple piece of code, but the solutions I've tried for this problem haven't been working.
<!DOCTYPE html>
<head>
<style>
#ONE {
float: left;
border: 1px solid red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
border: 1px solid yellow;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
</body>
</html>
Upon resizing the browser, the "TWO" div falls below "ONE". I want to be able to keep the divs horizontal. Without resizing them based on screen width, I haven't found a suitable way to keep them horizontal on one line.
https://jsfiddle.net/hra5t6v0/
In addition to the answer by #connexo for more modern broswers that support flexbox.
* {
box-sizing: border-box;
}
header {
display: flex;
}
#ONE,
#TWO {
height: 50px;
flex: 0 0 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid green
}
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
Again, this forces a scrollbar due to overflow at widths less than 1004px (or 1000px if using box-sizing:border-box).
JSFiddle Demo
A couple of advantages.
Firstly, the default for flexbox is nowrap so you don't have to explicitly state it.
Secondly, it doesn't suffer from the white-space issue requiring a the font reset that is often employed.
Note: In fact, you could use both techniques and the flexbox will override the inline-block if the broswer supports it....progresive enhancment!
JSfiddle Demo (both)
What you need is a combination of display: inline-block; and white-space: nowrap;.
This way you can stick to your fixed widths and the two div will stay in one line (which of course causes a horizontal scrollbar to appear if the viewport width becomes smaller than 1004px).
header {
font-size: 0; /* solves unwanted space between #ONE and #TWO */
white-space: nowrap; /* this makes inline-block children not wrap */
}
#ONE, #TWO {
display: inline-block;
font-size: 14px; /* reset font-size on children to whatever you need */
height: 50px;
width: 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid yellow;
}
https://jsfiddle.net/hra5t6v0/3/
Here you go http://jsfiddle.net/DIRTY_SMITH/1j7xter3/10/
header{width: 1000px;}
#ONE {
float: left;
background-color: red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
background-color: blue;
width: 500px;
height: 50px;
}
Related
I'm facing problem with floating elements inside div only , here is the problem:
.main{
border-style:solid;
border-color:yellow;
overflow:auto;
}
.first {
width:200px;
height:100px;
float: left;
border: 10px solid green;
}
.second {
width:200px;
height: 50px;
border: 10px solid blue;
}
<div class="main">
<div class="first">test1</div>
<div class="second" >test2</div>
</div>
I need an explanation about the border of second DIV and its content position. Why the border is behind but the content is under the first div?
Also according to : https://css-tricks.com/all-about-floats/#article-header-id-3
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.
I need clarification why this happening.
EDIT: I'm asking for explanation for it's behavior for both questions , NOT how to solve it .
This is the logical behavior of how the elements should be painted but you are having an overflow issue combined with how float works that is making things strange.
Let's remove some properties and follow the code step by step. Let's start by removing overflow:auto from main and the fixed height from .second
.main {
border-style: solid;
border-color: yellow;
/* overflow: auto;*/
}
.first {
width: 200px;
height: 100px;
float: left;
border: 10px solid green;
}
.second {
width: 200px;
/*height: 50px;*/
border: 10px solid blue;
}
<div class="main">
<div class="first">test1</div>
<div class="second">test2</div>
</div>
As you can see, the floating element green is above the the blue div and floating only around its content which is text. Like you can read here:
The float CSS property specifies that an element should be placed
along the left or right side of its container, allowing text and
inline elements to wrap around it. The element is removed from the
normal flow of the web page, though still remaining a part of the flow
(in contrast to absolute positioning).
And since both div have the same width the text will be at the bottom and not the right. You can change the width of the blue div to see the difference:
.main {
border-style: solid;
border-color: yellow;
/* overflow: auto;*/
}
.first {
width: 200px;
height: 100px;
float: left;
border: 10px solid green;
}
.second {
width: 200px;
/*height: 50px;*/
border: 10px solid blue;
animation:change 1s infinite alternate linear;
}
#keyframes change{
from{width:200px}
to{width:400px}
}
<div class="main">
<div class="first">test1</div>
<div class="second">test2</div>
</div>
Now if you check the painting order you will see that we first print the border/background of block non-floating element in the step (4) then we print the floating element in the step (5) then we print the content of the non-floating element in the step (7) which explain why you see the blue under the green
Now if we add a fixed height to the blue element you will face an overflow issue so the content of the blue will stay outside (like in the previous code) BUT the border that define the limit of the element will be behind the green element (like described in the paiting order)
Here is a code with animation to better understand what is happening:
.main {
border-style: solid;
border-color: yellow;
/* overflow: auto;*/
}
.first {
width: 200px;
height: 100px;
float: left;
border: 10px solid green;
}
.second {
width: 200px;
border: 10px solid blue;
animation:change 2s infinite alternate linear;
}
#keyframes change {
from{height:300px;}
to{height:50px;}
}
<div class="main">
<div class="first">test1</div>
<div class="second">test2</div>
</div>
You can also clearly see that the height of main yellow element is following the height of the blue one because it's the only in-flow element which explain your second question about float not being considered in the height of their parent element BUT by adding overflow:auto you will create a block formatting context thus the element will behave differently and will consider the height of floating elements inside:
.main {
border-style: solid;
border-color: yellow;
overflow: auto;
}
.first {
width: 200px;
height: 100px;
float: left;
border: 10px solid green;
}
.second {
width: 200px;
border: 10px solid blue;
animation:change 2s infinite alternate linear;
}
#keyframes change {
from{height:300px;}
to{height:50px;}
}
<div class="main">
<div class="first">test1</div>
<div class="second">test2</div>
</div>
In this last you can clearly see the overflow issue that is making the text to be outside the blue div because oveflow:auto is adding a scroll bar.
When you add a float property to any div, its parent stops taking any heights of the floated property. And anything that you add after the floated div the parent takes its height. If you removed the overflow: auto, you will see that the parent will take only height of the 2nd non-floated element. Although overflow:auto solves the problem of parent not taking complete height, but it doesn't solve the issue of non-floated element taking space from the start of the parent element (and not after the floated element).
So to fix that, you need to clear the float applied on the first div so that your next div(non-float) come below the floating div and both floating and non-floating divs take the required heights.
Refer this link for more information on float
I usually use the clearfix class method to solve such an issue.
.clearfix {
content: "";
clear: both;
display: table;
}
.clearfix {
content: "";
clear: both;
display: table;
}
.main {
border-style: solid;
border-color: yellow;
overflow: auto;
}
.first {
width: 200px;
height: 100px;
float: left;
border: 10px solid green;
}
.second {
width: 200px;
height: 50px;
border: 10px solid blue;
}
<div class="main">
<div class="first">test1</div>
<div class="clearfix"></div>
<div class="second">test2</div>
</div>
.clearfix {
content: "";
clear: both;
display: table;
}
.main {
border-style: solid;
border-color: yellow;
overflow: auto;
}
.first {
width: 200px;
height: 100px;
float: left;
border: 10px solid green;
}
.second {
width: 200px;
height: 50px;
border: 20px solid blue;
}
<div class="main">
<div class="first">test1</div>
<div class="second">test2</div>
</div>
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
FIDDLE
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:inline-block;
}
.b
{
background-color: gray;
display:inline-block;
border: 1px solid;
}
.main
{
width:100%;
display:inline-block;
height: 300px;
}
Why does the div b is at the bottom. Please set height at the fiddle and check. It ll grow down. Does anybody know the reason?
inline-block default value for vertical-align in CSS is baseline. You need to set the vertical-align property to fix that.
.b
{
background-color: gray;
display:inline-block;
border: 1px solid #ccc;
vertical-align:top;
}
DEMO
Add vertical-align: top; rule to class b or all the classes that have the rule display: inline-block. display: inline-block is by default bottom aligned.
you can use table-cell instead of inline-block;
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:table-cell;
}
.b
{
background-color: gray;
display:table-cell;
position: relative;
border: 1px solid;
vertical-align:middle;
}
.main
{
width:100%;
display:table;
height: 300px;
}
Jsfiddle
inline-block behave as the block level when your browser will be re-sized larger or if your contents exceeds than its width while display: table-cell; won't. You'll also find the gap between block when you apply display: inline-block;
more can be read on this question.
question
There are rules in display: in-line block that mess it up in your case. Just change them to float: left as in this jsfiddle
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
float: left;
}
.b
{
background-color: gray;
float: left;
border: 1px solid;
}
.main
{
width:100%;
float: left;
height: 300px;
}
You don't have any contents on first and last divs.
Because all the divs are displayed inline-block the default position will go to baseline. Try adding some contents to the .a and .c divs, you will see different behaviors.
When you are all setup with the contents you need to adjust the vertical-align to have your desired look.
Given this css:
#parent {
width: 100px;
height: 100px;
background-color: #090;
}
.childs {
width: 50px;
height: 50px;
background-color: #009;
border: 1px solid #999;
}
and this html:
<div id="parent">
<div class="childs"><p>aaa</p></div>
<div class="childs"></div>
<div class="childs"></div>
</div>
this is demo
http://jsfiddle.net/A3PJu/2/
I want that children divs placing in horizontal and not in vertical (as are they now), how make this?
float: left for children tags, not working in this case
You can use display:inline-block with white-space:nowrap. Write like this:
#parent {
width: 100px;
height: 100px;
background-color: #090;
white-space:nowrap;
font-size:0;
}
.childs {
width: 50px;
height: 50px;
background-color: #008;
border: 1px solid #999;
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
white-space:normal;
font-size:13px;
vertical-align:top;
}
Check this http://jsfiddle.net/A3PJu/3/
The problem is that the width of the parent element is not big enough for 3 times 50px .childs. If you increase the #parent width to say 200px, float: left will work.
I want to create a two column layout with the right floated column containing a div that becomes scrollable once its content overflows the browser window height.
This is the html code that I am working on:
<div class=container>
<div class=column_A>A</div>
<div class=column_B>B
<div class=content>C<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>C
</div>B
</div>
</div>
And this is the css code:
.column_A {
float: left;
border: black solid 2px;
height: 500px;
width: 65%;
background: red;
}
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
}
.content {
border: white solid 3px;
overflow: auto;
background: green;
}
The scroll is currently on the browser window, how do I transfer it to the content?
You use overflow: auto like this:
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
overflow: auto;
height: 600px; /* ? */
}
You need to specify the height for your right column, though.
EDIT: To answer your comment, the easy way to go about it is if you set your document body's height to 100%, like this:
body {
height: 100%;
}
Then use a custom percentage to set the column's height to your liking.
.column_B {
...
height: 99%; /* or whatever you need */
...
}