I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
Related
I have been reading widely about this but haven't been able to solve it to my satisfaction.
I have a div (<section>) that contains one <p> and 3 <div>s. I would like to distribute the 3 divs equally in one line so that the left border of the 1st div is on the left border of the document (<body>) and the the right border of the 3rd div on the right border of the document.
I don't want to use float because the backround-color would vanish.
I have tried flex but justify-content did not yield the expected outcome.
Here's the code on JSBIN.
Thank you!
You can use display: flex on the container, and set the width of the three div elements to take up one third (or as close as we can get) of its container. The container must have a set width (either pixel or percentage) for it to work.
#container {
display: flex;
height: 600px;
width: 600px;
background-color: lightgreen;
}
#container div {
border: 1px solid black;
margin: 0 10px;
width: 33.333333%;
}
#container div img {
width: 100%;
}
<div id="container">
<div id="content1">
I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/P8z2H80.jpg">
</div>
<div id="content2">
I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/NfnBZAI.jpg">
</div>
<div id="content3">
I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/W8M37N2.jpg">
</div>
</div>
I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.
Assuming the elements are after body. Give 100% to the body, and all the div
body, #div1, #div2 { height: 100%; }
If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.
#parent { height: 800px; }
#div1,#div2 { height: 100%; }
Enclose those divs in a parent div, and set their height to 100%.
You simply need a three-column (X)HTML + CSS Layout.
It's here
Let insert a parent div (container of those two adjacent divs)
add a property 'display: flex;' to the parent div
.parent{
display: flex;
}
.child1, .child2{
padding: 10px;
border: 1px solid gray;
}
<body>
<div class="parent">
<div class="child1">
CHILD 1 AREA<br />
CHILD 1 AREA
</div>
<div class="child2">
CHILD 2 AREA
</div>
</div>
</body>
I want to make a web page that uses 100% of screen space. I have two divs:
1st - menu with fixed width (~250px)
2nd - whats left
The misleading part for me is that the menu div is not in the 2nd div. They both are in a wrapper div (100% width). The problem is that if I write 100% width for the 2nd div, it goes below the menu. If I write less %, I cannot be sure how it will be displayed in smaller resolutions.
Is there is some negative sizing or something? ATM. 1st div floats left and 2nd div float right.
UDPATE: here is some code:
div.main {
width: 100%;
}
div.1st {
width: 250px;
float: left;
}
div.2nd {
width: 100%; #here should be the space that is left in the main div#
float: right;
}
<div class="main">
<div class="1st">menu</div>
<div class="2nd">content</div>
</div>
Problem: content could be as wide as it needs to so if string or objects in it is big enough 2nd div goes below 1st. Menu width is fixed.
UPDATE #2: if i leave content width empty then it will also goes below menu since content is wide enough
Take a look at this Post, there you have the correct solution:
http://www.alistapart.com/articles/holygrail
You could do something like this : http://jsfiddle.net/steweb/78x8y/
markup:
<div id="container">
<div id="left">Width=> 250px, float left</div>
<!-- following div takes automatically the remaining width, no need to declare further css rules -->
<div id="remaining">Width => the remaining space</div>
</div>
css:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#left{
float:left;
width:250px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Yes, you can determine the width of absolutely positioned elements by setting left and right. This makes the browser solve the equation in the standard for width. See this demo for an example.
<style>
div#float {
text-align: center;
float: left;
width: 150px;
height: 150px;
border: 1px solid blue;
background: gold;
}
div.content {
background: yellow;
border: 1px solid purple;
height: 150px;
}
</style>
<div id='float'>
Float text.
</div>
<div class='content'>
Content text.
</div>
<div class='content'>
Content text.
</div>
can anyone explain how the 2nd div content is on the newline ? while the 1st div is inline with div#float?
By default, divs will take up the entire width of the block. Your first one is just beginning after the floated div because that's where it can begin. Since both your content divs are block-level elements, they will take up the entire width available to them.
There are lots of ways to control this, but I'm not sure what you're after.
The second div is displayed as a block-element. Block elements have a width of 100%, so there is no room left for the first div to appear on the left size of your second div.
try switching the "display" css property to "inline-style"
The first <div class='content'> is 150px tall, the same as the #float one, so it's pushed down exactly one line. If you wanted the #float to "span" both lines, give it more height, e.g.:
div#float {
text-align: center;
float: left;
width: 150px;
height: 300px;
border: 1px solid blue;
background: gold;
}
You can try it out here.
As becomes clear with above answers, this is not an issue specific about divs. It's about something called "The flow" within html-pages.
DIV's render default as an block element, which gives it a maximum width. When you float such an element, it loses this effect. Block elements however do not automatically clear floats. Thus, the first contentdiv takes all space available next to the float. The other contentdiv starts at the newline.
It's behaving exactly as it should. The first div in the markup is floated and thus taken out of the flow. It'll take up the 150x150 slot up in the top left corner and anything that comes after it in the markup will try to squeeze in the left over space to the right of the floated div which is what the first content div does. div's are block level elements so they will take up the entire width of the available space. Unlike an inline element, they will not shrink to fit the rendered text.
The first content div will stretch out till the rightmost edge of the window. If you're wondering why the first div (float div) did not behave like a block level element, it's because it was floated, which will cause it to shrink to fit it's contents (in your case you gave it an explicit width of 150px).
Once the browser has rendered the float div and the content div, it has exhausted the left over space so it goes to the next line and starts from the very beginning of that line for the second content div.
Looks like you are trying to set up a navigation bar followed by content. If you wrap your content in a div and float that div to the left, you will stay to the right of the gold div but a column drop will occur when the browser is resized too small to accommodate them. So you need a parent div with a width for both the float and content divs. I added an 800 pixels outerwrapper div to your markup.
.....
div#contentwrapper {
float: left;
width: 550px;
}
#outerwrapper {
width: 800px;
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id='float'>
Float text.
</div>
<div id="contentwrapper">
<div class='content'>
Content text.
</div>
<div class='content'>
Content text.
</div>
</div>
</div>
.....
You might also want to use a different name than the css reserved word "float" for your divs. For more CSS float tutorials.
I have a div that holds some text, it has a background with a border, but for some reason the box is not expanding to the text, even with overflow: auto; here is my script for the box as well as a picture:
.box { background: #ffdcba; border: 1px solid #f78d25; display: block; clear: both; margin: 4px 0px; padding-left: 15px; overflow: auto; }
the divs inside are just floating, left and right, and have display: inline on them. heres a picture:
http://i45.tinypic.com/2woj1br.gif
A floated box will not expand to fit its contents. You need to add a clearing element after your content. <br> is usually good.
YOu don't specify the exact construction of the HTML, but I"m asssuming you've got something like this:
<div class="box">
<div style="float: left">test subject></div>
<div style="float: right">
<div>ASD</div>
etc...
</div>
</div>
Floating elements removes them from the regular flow and will cause the "overflow" you are seeing. You need to add a non-floated element below the floated parts to force the containing div.box to "expand" to contain the floats:
<div class="box">
<div style="blah blah" ....
etc....
<br style="clear: both" />
</div>
As well, the overflow: auto will not have any effect on your .box style, because it does not specify any height or width - it will naturally just expand to contain whatever content you put in there. To force a scrollbar to appear, you need to put in either height or width styling, and enough content to exceed either of the limits.