I'm trying to create few divisions and apply different background for each division but my code is not working as expected.
HTML
<div class="main">
<div id="div1">Im in div-1</div>
<div id="div2"></div>
<div id="div3"></div>
</div>
CSS
.main{
background-color:red;
}
#div1 {
height:200px;
width:100px;
float:left
}
#div2 {
height:200px;
width:500px;
float:left
}
When I set the background color for each id, it's working as expected but when I set for the class it's not working.
It works, you don't see it because your floating divs are not wrapped by the parent.
Add overflow:hidden to the parent div
Fiddle
Here U can achieve this by using floated divisions (divs) clearing without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation.
Read this
http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/
http://css-tricks.com/snippets/css/clear-fix/
Try this -
<div class="main clearfix">
<div id="div1">Im in div-1</div>
<div id="div2"></div>
<div id="div3"></div>
</div>
In your CSS - Add this
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
DEMO
You need to add overflow:hidden; to the parent div, so it should look like this:
.main{
overflow: hidden;
background-color:red;
}
Related
Unnecessary white space is added to my nested divs in between .boxwrap and .lsmlbox + .rsmlbox which is making it impossible to line up .smlbox + .rsmlbox with .box
I believe this is a much more difficult problem to solve than expected?
I would like for the "inner" (referring to center of screen) margins of .lsmlbox and .rsmlbox to be dependent on screen size, but I would like the outer borders to always remain "sticky" to .boxwrap so that when the screen size changes the boxes only get narrower but remain lined up to the full sized .box div above it.
.box
{
margin-left:5%;
margin-right:5%;
margin-bottom:80px;
}
.boxheader
{
font-size:17pt;
letter-spacing:3px;
padding-bottom:10px;
text-transform:capitalize;
}
.boxcontent
{
text-align:left;
border: 1px dotted #000000;
border-top: 0px;
border-bottom: 0px;
padding-left:15px;
padding-right:15px;
letter-spacing:3px;
}
.boxwrap
{
margin:0 5%;
}
.lsmlbox
{
display:inline-block;
max-width: 30%;
margin-bottom:80px;
margin-right:4%;
vertical-align:top;
}
.rsmlbox
{
display:inline-block;
max-width:30%;
margin-bottom:80px;
margin-left:4%;
vertical-align:top;
}
HTML:
<div class="box">
<div class="boxheader">SLDKFJSDLFKJSDLKJF.</div>
<div class="boxcontent">
SDFSDFLSDFSDFLKJ
</div>
</div></div>
<div class="boxwrap">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">SDFSDFSDF</div></div>
<div class="rsmlbox">
<div class="boxheader">Your Best Source Since 1977</div>
<div class="boxcontent">
SDFSDFSDFSDFSDF
</div></div>
</div>
Edit: got rid of floating divs but now I'm in a deeper problem.
it really depends on what you want it for, but you could use:
display: inline-block;
on each item you want on the same line
You can also use position:absolute;. For your case just remove the float in both .lsmlbox and .rsmlbox and put this in your .rsmlbox:
.rsmlbox
{
position:absolute;
top:8px;
left:700px;
margin-right:20%;
width:27.5%;
margin-bottom:80px;
}
Hope this helps!
You can use float without breaking your layout by wrapping your code in a container.
CSS
.clearfix {
position:relative;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
HTML
<div class="clearfix">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">
SDFSDFSDFSF
</div></div>
<div class="rsmlbox">
<div class="boxheader">Your Best Source Since 1977</div>
<div class="boxcontent">
SDFSDFSDFSDF
</div></div>
</div>
It depends. In some cases float is good.
In some - inline-block. I personally like inline-block.
You can read more about it here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://jsbin.com/qikubuce/1/edit?html,css - sample
Yes, display-block is the better way to go. Float was originally intended for images.
Here is a fiddle that demonstrates using inline-block
I have added a class name of box for the two boxes, and changed their current class names to ID's instead:
.box{display:inline-block;}
#lsmlbox{}
#rsmlbox{}
By using one class name for the two boxes will help reduce the need to write duplicate rules.
Another thing you may want to do, is change the inner <div>'s to paragraphs instead. You could then define a standard rule for them using the following css:
.box p{padding:10px;color:#333;etc....}
Here's an updated fiddle demonstrating that.
Hope this helps.
I have a structure like this:
HTML
<div class="cat_item">
<div class="cat_image">
<img src="/res/imyg/srm450v2.jpg" />
</div>
<div class="cat_desc">
<h2>Mackie - SRM450v2</h2>
<p>
Description Text
</p>
</div>
</div>
LESS
.cat_item {
padding:10px;
border-radius:5px;
background-color:white;
box-shadow:2px 2px 5px black;
color:black;
.cat_image {
float:left;
margin-right:25px;
padding:5px;
background-color:red;
img {
width:125px;
height:175px;
}
}
.cat_desc {
padding:5px;
}
}
Now I want the cat_item div to be changing height, so it fits the image. However only the text influences the height of cat_item div. What am I doing wrong?
It's the float. Try a clearfix CSS or set overflow: hidden to the outer div.
How to clear CSS floats without extra markup – different techniques
explained. There are three major approaches: a) Floating the
containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS
pseudo-class.
From: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
You need the following just before the last closing </div>.
<div class="clearfix"></div>
And in your CSS:
.clearfix{
clear: both;
}
Let's say I have this HTML:
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
...and this CSS:
#container {
border:1px #ff0000 solid;
position:relative;
}
#container .child {
width:200px;
height:200px;
background:#f5f5f5;
float:left;
}
Without using "float", does anyone know how to make #container's height stretch to collective height of all DIV's with class.child?
http://jsfiddle.net/TLxxR/
In case anyone is wondering why, I'm trying to center #container (like this: http://jsfiddle.net/TLxxR/1/) and using "float:left" for example removes the centering.
#container {
border:1px #ff0000 solid;
position:relative;
overflow: hidden;
}
Adding overflow hidden will clear your floats
edit: adding overflow: auto also clears the float if you find that other elements are being cut off
You need to use a clearfix:
#container:after {
display: table;
content: '';
clear: both;
}
The complexity of them will depend on the browsers your application needs to support, but the above should get you started.
Here's a great article that explains it a little better and in more details.
And here's a jsFiddle Demo.
You can add a <div style="clear: both"></div> after last .child.
Just set the parent to display: inline-block and it will expand with the child.
#container {
border:1px blue solid;
position:relative;
display: inline-block;
}
.block
{
width:540px;
margin:20px;
padding:10px;
border:1px solid Gray;
}
<div id="header" class="block">
<div id="pe" class="text">
<b>Name :</b> <span>King</span><br />
<b>Surname :</b> <span>Kong</span>
</div>
<div id="area" class="text">
<span id="city">Abcs</span><b>/</b>
<span id="state">Bcsdf</span>
</div>
</div>
If u run the above code in Jsfiddle, then it shows a border around the text and the important thing is that the height of the block class is auto, so it automatically adjust its height.
But the problem comes when i added the following css :
#pe
{
float:left;
}
#area
{
float:right;
}
Now the height of div.block is not set automatically. Can anybody tell me the problem?
add float:left; in your block class.
Now You need a Clearfix for it
.clearfix:after{
clear:both;
line-height:0;
height:0;
display:block;
background-color:transparent;
border:none;
content: ".";
visibility:hidden;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
you add it like this
"<div id = "header" class="block clearfix"></div>"
because float takes them out of the current flow. They are not inside the block div in the same way they where, use positioning and display:inline to get them to line up the way you want
You can use absolute positioning where by the outer element is set to height:auto and the inner #pe and #area are set to height:100%.
Have a look at this answer: How to make a floated div 100% height of its parent?
That's because they're not part of the common flow of the document anymore.
The solution could be to set display: block in the block class and then use position: absolute to position the element within that block by using left: 0 and right: 0
Just add overflow:hidden to class "block".
.block{
width:540px;
margin:20px;
padding:10px;
border:1px solid Gray;
overflow:hidden;
}
Here is the fiddle: http://jsfiddle.net/rWuBF/
I would add overflow:hidden to the containing element (#header). That should fix it.
Although a bit dirtier, you can also add something that clears both after the floated elements.
<div id="header" class="block">
<div id="pe" class="text"> ... </div>
<div id="area" class="text"> ... </div>
<div style="clear:both;"></div>
</div>
There are also cleaner "clearfix" variations of this as well, that will let you clear:both without adding non-semantic markup.
http://www.positioniseverything.net/easyclearing.html
I have a parent div with a variable number of equally sized child divs floated left. I want the parent div to expand to the width of the children no matter what, even if it means overflowing its own container.
Is there a way to do this naturally with HTML/CSS?
Example (The stretchable div would wind up being 180px wide):
HTML:
<div id="stretchable-div">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
...
</div
CSS:
.child {
width: 60px;
height: 60px;
float:left;
}
In this example the stretchable-div element will bust out of its parent, and stretch to its children.
Live Demo
css
#parent{
width:200px;
height:180px;
background:red;
}
#stretchable-div{
background:blue;
position: absolute;
}
.child {
width: 60px;
height: 60px;
float:left;
}
Markup
<div id="parent">Im a parent
<div id="stretchable-div">
<div class="child">a</div>
<div class="child">b</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
</div>
</div>
Just like #Pizzicato's example, but using overflow:hidden to clear the parent div: http://jsfiddle.net/dSjv4/.
There's a great article about positioning and clearing div's on A List Apart here (near the end of the article).
you can add display: inline-block; for the parent element. To work in ie7 also you need to use display:inline;zoom:100%; instead.
So a possible css for what you need is this:
#stretchable-div {
background: none repeat scroll 0 0 red;
display: inline-block;
overflow: auto; /* clear the floats */
*display:inline; /* ie7 hack even better use conditional comment */
zoom:100%;
}
example: http://jsfiddle.net/8JJSf/