This is what I'm trying to achieve:
So far, this is the code I have.
The columns work like they should. The problem is that whatever I place after the columns in my HTML is actually behind the columns on the page, not beneath them like I want.
Would it be a problem with the css that I'm using for the "test-box" div?
.test-box{
background:red;
width:100%;
height:300px;
}
Is there a better way of doing this?
.test-box{
background:red;
width:100%;
height:300px;
clear:both;
}
clear: both will clear your other div from being affected by the floats, therefore placing it after
It can be done by adding a clear: both; to the CSS of the test-box:
.test-box{
clear: both;
background:red;
width:100%;
height:300px;
}
Add clear: both; or float: left; (if the 3 column divs take up the entire width.
you need to add
.test-box{clear:both;}
The jsFiddle
adding more always keep this at the end of a css
.clearfix {
clear:both;
}
and call it
<div class="test-box clearfix">
in this class
.three-columns div{
...
display:table-cell;
}
just remove the float:left and add display:table-cell
I personally wouldn't set the height in px unless you are 100% sure that the text will never change. there are different ways to achieve this, one way would be:
1) give a single class to each box ".box" for example
.box{
width:33.33%;
margin:20px 0 0 20px;
float:left;
}
also remember to clear:both what comes after these boxes.
This would be a responsive solution, although you can use a px based solution. It really depends on what the requirements are.
Related
I am trying to achieve the following layout in html. Bigger div 1. Then another div next to it with a margin on the top. If I give float: left to the first div, on giving margin-top to the second div also brings the div 1 down. :(
please suggest.
Here's what you want, tested and working :)
http://jsfiddle.net/4FWWp/
HTML
<div id="first"><p>Hello<br/>Test</p></div>
<div id="second">World</div>
CSS
#first{
background-color:red;
float:left;
}
#second{
background-color:blue;
float:left;
margin-top:52px;
}
Take a look:
http://jsfiddle.net/Dc99N/
.d {
display: inline-block;
border:2px solid;
width: 200px;
height: 200px;
}
.sm {
margin-top: 50px;
height: 150px;
}
Took a quick stab at it and it seems possible.
What you need to is display inline-block on the divs and set the height of the divs as percentages.
Check out my codepen : http://codepen.io/nighrage/pen/bKFhB/
The grey background is of the parent div.
Flex-box could be the best and easier solution.
IE supports it since version 11, and currently all major browsers have a good support. Maybe is still a little soon but.... I think that in few months could be a very interesting feature.
Please, look at Flexible Box Layout Module
I need the id3 displayed below id2 instead of being displayed on the side?
How can I accomplish it in using CSS?
html
<div class="main" ></div>
<div id="id1">Im in div1</div>
<div id="id2">Im in div2</div>
<div id="id3">Im in div3</div>
<div></div>
css
#id1{
background-color:green;
width:30%;
height:200px;
border:100px;
float:left;
}
#id2{
background-color:red;
width:20%;
height:100px;
border:100px;
float:left;
}
#id3{
background-color:yellow;
width:10%;
height:300px;
border:100px;
float:left;
}
http://jsfiddle.net/w9xPP/
the best way to do it is to not use floats. The only reason to use them is to make things horizontal to other things. If you want things to fit together like a puzzle, look at masonry.js
Set clear: left; on #id3 like
#id3{
clear: left;
background-color:red;
width:20%;
height:100px;
border:100px;
float:left;
}
When you use float it tells subsequent elements to attempt to display next to them rather than below. Using clear clears the floats and gets rid of that behavior.
http://jsfiddle.net/w9xPP/1/
It sounds like you might be trying to do columns. #Diodeus is right about the ULs and LIs. You will probably want to refactor that code. However, if you are trying to have two columns of elements you could wrap your elements in a div and float them instead of the items they contain. Your child elements would then be placed within the floated columns. You might also want to check out a grid system like the 960 Grid or Twitter Bootstrap.
Dear Friends I am so struggling on about a problem came to me in my web design.
My layout as follows,
<div class="main_div">
<div class="left_column">
<div class=="fixed_div"></div>
</div>
<div class="mid_column"></div>
<div class=="right_column"></div>
</div>
and css file look like
.main_div{
float:left;
width:80%;
}
.left_column{
float:left;
width:20%;
}
.mid_column{
float:left;
width:40%;
}
.right_column{
float:left;
width:20%;
}
What i wanted to do is i need to make the fixed_div fixed inside the parent element and give the width to 100%. But it always comes out of the left_column. How would i overcome this problem please help. Thanks
Please note that sometimes i am changing left_column's width from jquery.So at that time the fixed_div must also adjust as the left_column.
For block elements your issue is fixed by default cos they have width: auto;. Do not adjust #fixed_div width at all and it'll work.
P.S. Using IDs for selecting all elements in css - isn't a good style, better rework it to the classes.
You have floated all elements for this you must use clearfix technique to remove any error. And set .fixed_div to display: block; . If this do not help you please place a Demo. What actually you have been in problem.
This should help:
.fixed_div {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.left_column {
position: relative;
float:left;
width:20%;
}
http://jsfiddle.net/bobbyfrancisjoseph/2EfLz/1/
The following is a code that I wrote. The problem is that in the resulting page the wrapper div does not seems to container the nested divs.
add "overflow: hidden;" to your wrapper's definition.
Since your body elements, #left-container, #right-container, are being floated they are being removed from the regular content flow, so you will need a "clearfix" to properly contain the floated elements. You can do that in two ways:
One, by Using a clearfix, like the following, my preferred approach since its inline and doesn't mess with the absolutely positioned elements that might be overflowed out of the container:
#wrapper:before, #wrapper:after {
content:"";
display:table;
}
#wrapper:after {
clear:both;
}
#wrapper {
*zoom:1; /* ie7 hasLayout fix */
}
Or two by using overflow:hidden on your #wrapper container, a method which i try to avoid since you might have positioned elements that might overflow out of your container with positition:absolute, so they will be cutoff with that method. A third option would be to add a at the end of your container, but that is just an icky approach :).
Demo with the first (and my preferred) approach http://jsfiddle.net/2EfLz/2/
you give overflow:hidden in your #wrapper
#wrapper
{
margin:0 auto;
position:relative;
background-color:#999;
width:960px;
border:dashed #006 thick;
overflow:hidden;
}
http://jsfiddle.net/2EfLz/3/
use overflow:hidden; in wrapper style.
try something like this position: absolute;
#wrapper
{
margin:0 auto;
position: absolute;
background-color:#999;
width:960px;
border:dashed #006 thick;
}
Example I have set the master div with 100px the height. In the div have one logo which I want it to be vertical-align:middle;
Here an example http://jsfiddle.net/c7Me7/
I want the logo will be auto align to middle without have a padding or margin.
Output should be like
Let me know
UPDATED: This works.
#top { height:100px; background:#000; padding:0 20px;line-height:100px;}
#logo img {vertical-align: middle;}
see - http://jsbin.com/utuye5/2
Please take a look at this page, it advices on several ways to solve this.
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
http://jsfiddle.net/c7Me7/7/
use text-align:center
#top { height:100px; background:#000; padding:0 20px;position:relative}
#logo {position:absolute;top:30% }
Try this top can be adjusted as per need
Thanks,
Amit