my page is structured like this:
When I load images in the 2nd div, only the inner div is extended, the parent is not. this is quite bothering, since the parent div has a border all arround. but the child2 div extends over it, outside the parent. both are set to relative and have min-height set to a value. Simplified version of the page:
<div id="parent">
<div id="child1">
</div>
<div id="child2">
<br/><br/><br/><br/><br/><br/><!--here come the images-->
</div>
</div>
here's the example: http://jsfiddle.net/TGCPn/1/
how can I make it that it will automaticaly extend?
Try removing the fixed width on the #parent and then adding display: inline-block on #parent
#parent
{
display: inline-block;
min-height:100px;
border:solid 1px;
}
Demo
Try <div style="width:auto"> on the parent div
Related
So i'm having trouble entering the element with the middle class. So the container box-block-head-yellow had a width of 100% so that it can span any container, the class middle is using display inline-block so that the container wraps around it's content you can see the markup below.
<!-- Markup for container -->
<div class="box">
<div class="box-block-head-yellow">
<div class="box-title-block middle">
<h1 class="box-title">Latest projects</h1>
</div>
</div>
</div>
So the issue i'm having is the middle container isn't centering in the middle. With the following styles on each element.
Parent element
Child element
Result of element not being entered horizontally
Adding the following CSS to your box-block-head-yellow class can solve the center alignment issue.
.box-block-head-yellow {
width: 100%;
text-align: center;
}
.middle {
display: inline-block;
}
I can not get my yellow background color to show up with the nested divs that show up in 3 separate columns. What am I doing wrong?
<div id="wrapper">
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
</div>
CSS below:
#wrapper {
background-color: yellow;
}
div.rightside {
width: 31%;
margin: 0 1.33333em 0 0;
display:inline;
float:left;
}
Here is my jsfiddle: http://jsfiddle.net/yPX5Q/2/
Thanks
Cheers
Add overflow:auto to your wrapper div
#wrapper {
background-color: yellow;
overflow:auto;
}
jsFiddle example
Floating the inner divs essentially gives the wrapper div no height. By adding the overflow:auto it brings back the expected behavior.
you can set overflow:hidden; http://jsfiddle.net/yPX5Q/3/ on the parent container or use a clearfix method with a pseudo element or extra element.
More info about floatting elements here : http://css-tricks.com/all-about-floats/
I have a simple problem with divs. How can I float 3 DIVs inside one DIV that's not floated?
Here is my code:
<div style="margin:0 auto;width:1240px;border:1px solid #000000;">
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
</div>
I want to float child DIVs inside this parent DIV or a way to center them without floating...display:inline-block won't work for the child divs as they are of different heights and one div is an image...so i think the best way is to float them and optimize the margins...In this case i want the parent div to be centered across the screen so i use margin:0 auto instead of float but this leads to the child div not stretching the parent div and it appears as a thin line.
You can test the fiddle I created to understand the problem:
http://jsfiddle.net/tQpM5/
Thanks
If I understand correctly, you want to center 3 boxes on the same row:
.wrapper{
margin:0 auto;
text-align:center;
vertical-align: top;
}
.box{
width:200px;
height:50px;
display:inline-block;
text-align:left;
}
HTML:
<div class="wrapper">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
</div>
demo
Since all the child divs widths are less than that of the parents, they should naturally line up side by side. Try give each child div a position: relative; margin: auto. This way they should center themselves with in the parent
The parent div appears as a line because its contents is floating, settings its height to 1px. To resolve this you need to clear the floats after this element. Often referred to as clearfix.
.clearfix:after {
clear: both;
content: "";
display: table;
}
Then you can just float the children as normal. I used margin: auto on the parent to make it centered.
See this demo:
http://jsfiddle.net/c2NjZ/
Note for old browser support on clearfixing see:
http://css-tricks.com/snippets/css/clear-fix/
The container div's float and it's child div's float values (or no float) are independent of each other, you just need to clear the child div's before you close the parent div:
<style type="text/css">
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;}
</style>
<div class="parent">
<div class="child" style="float:left;">
Hi
</div>
<div class="child" style="float:right;">
There
</div>
<br class="clearfloat">
</div>
Update to your example: http://jsfiddle.net/tQpM5/2/
What you need is to give the parent div: overflow:hidden; so it can contain its child div.
Child divs will float beside each other, however when you re-size your browser, they will float under each other, to avoid this, you can give the parent div a min-width.
To center the parent div, you can give it a margin-left:auto; margin-right:auto;, however you must specify a width so that it does not stretch and take all its available width.
Since you chose to use floats and not inline-block, then the only thing left is to deal with margins just like you said.
DEMO
here is my code
<div class='content'>
<div class='div1'>content</div>
<div class='div2'>content</div>
</div>
.content { width:300px;}
.div1 { float:left;width:200px;}
.div2 { float:left;width:100px;}
in some case I need to set display:none for div2. is it possible to set .div1 width to full-size of .content ( 300px )
Reorder your divs, and use overflow: hidden:
<div class='content'>
<div class='div2'>content 2</div>
<div class='div1'>content 1</div>
</div>
.content { width:300px; overflow: hidden;}
.div1 { overflow: hidden;}
.div2 { float:left; width:100px;}
So long as you only need to add or remove the second div, the easiest solution is to only make that second div a float, and place it within the first, non-floated div, like so: http://jsfiddle.net/Tb89A/ .
Just remove the comments on the display:none to see it in action.
Try to add class (for example, hidden) to div2 when you set display: none and then set fullwidth do div1 (in which you define width: 300px). Finally, you can go with jQuery and conditionals:
if($('.hidden').length()) {
$('.div1').addClass('fullwidth');
}
Of course you may want to change those class names to more specific ones.
I can't think of any different solution, since CSS doesn't allow conditional statements.
I have one Parent div. Top of the Parent div contains two child divs. How can i give third child div below the first child div
<div class=parent1>
<div class=child1>some text</div> /*this is in top left of the parent div */
<div class=child2>some text</div> /*this is in top right of the parent div */
<div class=child3>some text</div> /*how can i write css for this div come as left bottom*/
Using the css float will work if you are willing to assign a fixed width to your div's.
<style>
div.parent1 {
width: 800px;
}
.child1 {
float: left;
width: 400px;
}
.child2 {
float: right
width: 400px;
}
.child3-container {
clear:both;
text-align: right;
}
</style>
<div class=parent1>
<div class=child1>some text</div>
<div class=child2>some text</div>
<div class='child3-container' >
<div class=child3>some text</div>
</div>
</div>
You can put jQuery to use to do the job easily. Use the eq() selector of jquery to get you the desired div:
$('div#parent div:eq(1)'); // gets second div inside a div with id parent
How can i give third child div below
the first child div
If I get you, you want to add another div after the first child div, you can again use eq and after selector for that:
$('div#parent div:eq(0)').after('<div>Some Content</div>');
Update:
Here is the demo I created for that
The idea is that parent div should be positioned relative and child divs absolute and then using top, left, width and height properties.