I'm fairly new to CSS, so, this might look silly:
In CSS, i use the property to float:left to position a content left to the neighbouring element, now, i have a container for all the elements that have the float property. how do i make the parenting element adjust it's height according to it's content?
the HTML:
<div id="page">
<div id="side">
<p>my sidebar</p>
</div>
<div id="content">
<p>my content</p>
<p>my content1</p>
<p>my content2</p>
<p>my content3</p>
</div>
the CSS
/* the "border:3px solid #000;" are used to make the div border visble*/
#page{
position:relative;
width:400px;
background-color: #F4F0EC;
border:3px solid #000;
}
#side{
border:3px solid #000;
float:left;
}
#content{
float:left;
border:3px solid #000;
}
with the above, the <div id="page"> look like it has a height of 0px.... how do i make it warp the content ??
since i'm new to CSS, please explain what am i doing wrong, thanks
Fiddle:http://jsfiddle.net/AuSmP/
You can add overflow:hidden for your div #page which will allow it to resize to fit its contents.
See Working Demo.
Learn more about overflow property.
Alternatively you can also add <div class="clear"></div> and then CSS .clear{clear:both;} to achieve the same.
See Demo.
Changing Position from relative to absolute can also help you out
Check this JSFiddle Demo
Is this what you expected? http://jsfiddle.net/AuSmP/4/
just add float:left style to #page will fix the trick, or you could also use clear:both at the bottom
Related
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
I have 2 divs, one floating left(#div1) and the other floating right(#div2). I need to add a third div(#div3) which floats centrally over these. I am currently trying to use the z-index. However I am getting some strange effects like the div1 and div2 being forces down. Also the "container" div centrally aligns all child divs.
So for some code:
<div id="container" style="width: 980px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black;position:relative; top:0px, left:auto; z-index:1000">I look like a button and I float the other divs, in a central location</div>
</div>
I would really appreciate some guidance on the correct code for the above, to ensure that #div3 does float over #div1 and #div2, and is centrally located.
Thanks in advance.
First of all, the style attribute on 3rd div isn't closed.
Use ; to separate between style statements in the style attribute. And its color, not colour
I would also suggest using a css
Heres a codepen:
http://codepen.io/Vall3y/pen/QwWPYd
If you want the container to float in the center, its enough to give it margin: auto
Giving the 3rd div a width and auto margin will get your desired result I would assume. I also removed some unnecessary statements like position relative
#div3 {
border:1px solid black;
color:black;
margin: auto;
width: 30%;
}
Heres a codepen:
http://codepen.io/Vall3y/pen/gbOyEb
Also consider using display: flex and ditch the floats altogether
http://codepen.io/Vall3y/pen/ogNOVV
If you want to read more on flexbox I recommend the csstricks article http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think you need to add to #div3 display property: inline-block, and set text-align: center to #container, check it out here
No relative or absolutely positioned elements needed! This should give you what you want:
CSS:
#container{width: 580px; border:2px solid orange; height:350px;}
#div1{border:2px solid blue; width:260px; height:100px; float:left;}
#div2{border:2px solid green; width:260px; float:right; height:100px;}
#div3{border:1px solid black; width:100%; float:left; height:100px;}
HTML:
<div id="container" >
<div id="div3">I look like a button and I float the other divs, in a central location</div>
<div id="div1">Div1</div>
<div id="div2">Div3</div>
</div>
Heres a live demo:
http://jsfiddle.net/Lza5fz43/
You really should separate your CSS and HTML, but this is what I did...
Add width:inherit to your div3 and position:absolute:
<div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black; top:0px, left:auto; z-index:1000; position:absolute; width:inherit;">I look like a button and I float the other divs, in a central location</div>
</div>
You can modify the width to adjust where you want div3 to land and therefore can center it between them if you want.
Working JSFiddle: http://jsfiddle.net/re2hkbgh/1/
If this isn't exactly what you want just play with the width to get the effect you want as this is the positioning you are asking for! :)
I'm having a doubt in the basics of the HTML rendering. I'm having the following HTML/CSS.
http://jsfiddle.net/cgZ4C/2/
<style type="text/css">
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
}
.content
{
float:left;
width:196px;
min-height:20px;
background-color:#BABABA;
margin:2px;
}
</style>
<div class="outer">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div>
Why is the outer div not growing when the inner content grows? Even I tried adding some text inside .content divs. But still the .outer div is not growing?
You need to add overflow property to your outer div and assign proper value to it like
overflow:hidden
Find what is the most suitable for your need here
Here is the possible code change you need:
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
overflow:hidden;
}
CLEAR YOUR FLOATS! Always :-)
Add overflow:auto; like in this code: http://jsfiddle.net/cgZ4C/3/
Many CSS frameworks these days use a class clearfix . That has become the de facto standard. Twitter bootstrap uses it as well. What we need to do is just add a class clearfix to the outer div and you'll be done :)
Although Clearing floats is the correct way to go, sometimes, there is another way you can do this:
float your outer div too!!!
.outer {
float: left;
}
This way, the outer will respect the floated children and expand, but you'll need to float the parent div of outer too, and so on, until there is a ancestor div which is cleared/<body> is encountered.
All floats are like bro's so go along with each other much better than non-floated non-cleared divs.
:)
Add attribute overflow: hidden to the .outer style.
It doesn't grow because all of your content within the parent is floated. When an element is floated, it is no longer taken into consideration by the parent when it calculates it's total size. Since every element is floated, as far as the parent is concerned there is no content, so it doesn't resize.
Your code looks like a table so, with display:table (source) the element will behave like a table element.
http://jsfiddle.net/eWwtp/
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
display:table
}
Another solution, that avoid these issues:
But with overflow hidden, more issues can arise where items outside of that div are hidden, or cut off (usually with menus etc).
http://jsfiddle.net/4LqaK/
Add:
<div class="clear"></div>
.clear{clear:both}
I am trying to allow the height of the div to dynamically change according to the number of elements inside the div. The whole idea of what i am trying to do is shown in the diagram below
The last div should be able to change dynamically. It seems that i have to set the height of the third inner div. If i don't, the div appears outside the main div.
Solutions that i have tried:
1) overflow: auto
2) trying not setting the height of the 3rd inner div.
Must i use javascript? can i don't use javascript? These solutions didn't work. Need some guidance.. Sorry if the question was repeated....
Hey now i think you should this
HTML
<div class="parent">
<div class="child1">
<div class="one">One</div>
<div class="one">two</div>
</div>
<div class="child1">
<div class="one">One</div>
<div class="one">two</div>
</div>
<div class="child2">
dynamic height
</div>
</div>
Css
.parent{
border:solid 1px red;
}
.child1, .child2{
overflow:hidden;
margin:10px;
border:solid 2px green;
}
.one{
background:red;
border:solid 1px black;
padding:10px;
float:left;
margin:10px;
}
Live demo http://tinkerbin.com/i1R8emEb
Now change to height width or height according to your design ..
Don't give the div a fixed height, just use float:left; in your CSS.
I want a border of Div to be less than the width of div. How to implement that in CSS?
Following image will give you more Clarity:
http://imageshack.us/photo/my-images/440/divkr.jpg/
This is not possible with plain CSS.
You could however use two div's to get this effect.
<div class="outer">
<div class="inner">
text
</div>
</div>
.outer
{
background-color:blue;
padding:20px;
width:200px;
}
.inner
{
border:solid 1px white;
height:150px;
color:white;
}
http://jsfiddle.net/RreTH/
http://jsfiddle.net/RreTH/1/
That is not possible.
Border is always the outside of element's box model. However there might be a workaround you would like.
<div>
<div id="inner" style="border:5px #000 solid;">
</div>
</div>
Now, in this example, the border of #inner, will never exceed that of the parent.
As for the demonstration part, check this.
You will notice, the outer div has a thin red line to mark its border, but the inner div's border can act as outer div's inner border.
Hope it helps