I am having problem understanding the height of element in div. I have a header div which has certain divs inside it.The div inside occupy certain height. Isn't the header supposed to cover the area occupied by the elements defined inside it when the height is not mentioned. As per my understanding the header is supposed to wrap all the div inside it.
Please correct me if I am wrong.
This is my body
<div style=" float:left; background-color:pink; width:20%; height:40px; ">
THis is left
</div>
<div style=" float:left; background-color:gray; width:70%; height:40px; " >
<div id="htop">
This is top
</div>
<div id="hbutt" >
this is buttom
</div>
</div>
And here goes style
#cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px; }
#header{ background-color:red; width:100%; padding:5px; }
#cont2{ background-color:blue; width:10%; height:auto; padding:5px; clear:both; }
#htop{ background-color:maroon; }
#hbutt{ background-color:purple; }
For output and possible change need https://jsfiddle.net/sum1/vmq3y2rv/
When you have floating DIVs inside any other DIV, then height does not calculated automatically for outer DIV, to make it you should add display:inline-block or display:table to outer DIV depending on your layout.
#header {
background-color:red;
width:100%;
padding:5px;
display:inline-block;
}
Check this https://jsfiddle.net/vmq3y2rv/1/
Yes this is true but when all elements are floated inside of the header it collapses.
.clearfix{
clear:both;
}
and then insert a div right before your header ends with a class of clearfix.
Jsfiddle is here
https://jsfiddle.net/kriscoulson/vmq3y2rv/2/
You can either use float:left or display:inline-block/table , It will be based on your requirements and layout.
Related
I'm trying to achieve some indent for content inside div. I want to have all elements inside to have 100% width, but first ones have to be positioned further from the left side. This demonstration shows what I exactly need:
I tried to mess around with ::before pseudoelement for parent div, different positioning and floating but no luck. Is there a way to achieve this in CSS or maybe jQuery?
Use the :nth-child pseudo class to select the items you want and then just give them a margin.
div{
border:1px solid #000;
padding:5px 10px;
}
p{
background:#000;
font-family:arial;
color:#fff;
margin:5px 0;
padding:5px;
}
p:nth-child(-n+2){
margin:5px 0 5px 50px;
}
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</div>
By the way, floating items and giving them a 100% width is somewhat redundant so I have omitted that from my code.
You don't need to add width:100% to your elements. If they are block elements it will take automatically 100% of the container width. Then just use marginto whatever element you need:
HTML:
<div class="container">
<div class="content margin"></div>
<div class="content margin"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
body {margin:0; padding:0;}
.container {
width:400px;
padding:20px;
background-color:#ddd;
}
.content {
height:60px;
background-color:green;
margin-bottom:10px;
position:relative;
}
.margin {
margin-left:150px;
}
FIDDLE
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
i have parent div with 2 child divs inside. Both child div contain text, only 1 bigger than other. now consider responsive web design. I want 2nd child div at the bottom of parent div... i need to ensure both child div float left so that they can behave properly in responsive web
<div class="TitleHeader_Bar_L2">
<div class="WebPage_Title_L2">
<h4>Avaliable FeeZones</h4>
</div>
<div class="Title_Message_L2">
Select FeeZones to Add in Given Scheme
</div>
CSS
.TitleHeader_Bar_L2{
overflow:auto;
width:100%;
background-color:red;
}
.WebPage_Title_L2{
float:left;
color:#F8F8FF;
font-size:1.7em;
padding:.5%;
margin-left:.7%;
}
.Title_Message_L2{
float:left;
color:#F8F8FF;
font-size:1em;
font-style:italic;
margin-left:.7%;
}
You can try this:
Fiddle Here
.TitleHeader_Bar_L2{
overflow:auto;
width:100%;
background-color:red;
position:relative;
}
.WebPage_Title_L2{
float:left;
color:#F8F8FF;
font-size:1.7em;
padding:.5%;
margin-left:.7%;
}
.Title_Message_L2{
color:#F8F8FF;
font-size:1em;
font-style:italic;
position:absolute;
bottom:0
}
Good Luck...:)
Just a little question :
.site-main .sidebar-container {
display:inline-block;
vertical-align:top;
width:25%;
padding:0px;
margin:0;
border:0;
z-index:2;
float:right;
}
.content-area-sidebar{
width:75%;
display:inline-block;
}
why this widths don't work? one of the elemnts always goes down, i need to set 24.79% width to work and then i have a small blank space between them, i have tried with all kind of float combiantions but nothing works.
Any help would be appreciated.
Thank you
set margin:0px to your second css too:
.content-area-sidebar{
width:75%;
display:inline-block;
margin:0px;
}
by ht way if it doesn't work I suggest you use a div as parent container with position relative and child divs have position absolute so never gets mixed up:
<div style="position:relative">
<div style="width:25%;top:0px;left:0px;position:absolute;"></div>
<div style="width:75%;top:0px;left:25%;position:absolute;"></div>
</div>
I need this blue div to be next to red div, while yellow div must remain in place.
http://jsfiddle.net/pCGxe/
How to do this without using something like position:absolute, float:none - etc... nasty hacks?
Add margin-top: -50px to the big div.
Alternatively, you can also wrap the small divs in another div, and float that. Depends on the situation.
And position: absolute, float: none are not nasty hacks at all, they are the best friends of a sitebuilder :).
Don't add margins with fixed numbers and especially no margins with fixed negative numbers. What if your site's design or the size of the divs changes later? You'd need to change all those margins.
Here you go:
http://jsfiddle.net/pCGxe/10/
HTML
<div id="container">
<div id="div1and2">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div id="bigdiv"></div>
</div>
CSS
#div1and2 {
float: left;
}
In my opinion absolute positioning is not a hack, rather most developers just don't know how to use it - it's almost like occult CSS knowledge :P
So here's an example of how absolute positioning could be used to solve this particular problem:
#container{
width:500px;
height:400px;
border:1px dashed black;
position:relative;
top:0px;
left:0px;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:50px;
height:100px;
background:yellow;
}
#bigdiv{
width:350px;
height:250px;
position:absolute;
left:50px;
top:0px;
background:blue;
}
In order for absolute positioning to work properly, one of the ancestor elements of the absolutely positioned element (in this case #bigdiv) has to be positioned non-statically. position:static is the default positioning for any element, so if I want #bigdiv to be 50pxaway from the left side of #container, #container has to have non-static positioning; hence the position:relative;.
For the record, float:none is definitely not a hack :P
CSS
#container{
width:500px;
height:400px;
border:1px dashed black;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:50px;
height:100px;
float:left;
background:yellow;
}
#bigdiv{
width:350px;
height:250px;
float:right;
background:blue;
margin-right: 100px;
}
HTML
<div id="container">
<div id="bigdiv"></div>
<div id="div1"></div>
<div id="div2"></div>
</div>