Say I have the following DIVs:
<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>
How can I use CSS to place the sidebar DIV to the right of the main DIV, and set it to, say, 20% of the total width?
I'd also like to have some margins between the four DIVs, so that the layout doesn't look too cramped.
Would like it to work in "all" browsers, including that bastard IE6...
put main and sidebar in the wrapper, you can set the size/location of wrapper and preserve your layout.
#top {
/* top stuff */
}
#wrapper {
width: 800px;
margin: 0px auto; /* centers on page */
}
#main {
float: left;
width: 80%;
margin-right: 10px;
}
#sidebar {
float: left; /* by floating left here you have a greater control over the margin */
width: 20%;
}
#bottom {
/* bottom stuff */
}
use floats, negative margins and padding.
you can find good tutorials on http://alistapart.com about page layouting (i really recommend the holy grail) and it also deals a lot with cross-browser problems
http://www.alistapart.com/articles/holygrail
Try:
html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }
It's important for this kind of thing to use a reset CSS (there are others) as different browses have different default values for things like borders, margins and padding.
<div id="top">Page header</div>
<div id="main">
<div id="content">Main content</div>
<div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>
#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }
It's very very important that you set the doc type to strict, ala thusly:
If you do this, you wont need to clear your CSS (with a few exception) and can simply use the correct box models.
I will answer my own question with a link to this article which was exactly what I was looking for:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Related
I am using <div> to create a horizontal bar across the screen. Within that horizontal bar, I have 3 more <div> each of a different width. They are supposed to be all in a row horizontally next to each other. Instead, they are on top of each other. How do I fix this?
Also, if I don't have any text within the <div> in my HTML code, the <div> does not appear. Ex: <div>anything</div>
JSFiddle
You can add css float:left to div and If you also don't want any text in div you should add css height to div.
.horizon div{
float: left;
height: 20px;
}
like this http://jsfiddle.net/KG5B3/
Just use a float, which IS cross-browser compliant. Also you should clear your floats which can be seen on the updated JsFiddle
.horizon div{
float: left;
}
Fiddle
You can float those inner DIVs. You can also use inline-block (not shown).
<div class="horizon">
<div class="left">left</div>
<div class="mid">middle</div>
<div class="right">right</div>
<br style="clear: both" />
</div>
body {
margin: 0;
}
.horizon {
background: #000000;
width: 100%;
}
div.horizon div {
float: left;
}
.right {
width: 25%;
background: #ff0000;
}
.mid {
width: 50%;
background: #00ff00;
}
.left {
width: 25%;
background: #0000ff;
}
I would like to create a specific layout in html but have some dificulties.
Images are easier to understand than words, so here is what I have:
This is fine, but as soon as the div1 gets heigher, I will have this:
And my goal is to have something like that:
For the moment, I am using divs, which is probably not the good idea. Any help is welcome.
Thank you very much in advance.
Divs are a great way to do it. You can use a floated layout with a containing div around the two right divs. Here is some code to show you what I mean:
HTML
<div id="wrapper" class="clearfix">
<div id="sidebar"></div>
<div id="main_content">
<div id="top_right"></div>
<div id="bottom_right"></div>
</div>
</div>
CSS
#wrapper { background: #44BBF0; }
#sidebar { float: left; width: 100px; height: 500px; background: #485F40; }
#main_content { float: right; }
#top_right { width: 200px; height: 200px; background: #FF553F; }
#botom_right { width: 200px; height: 300px; background: #B0DE91; }
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* IE < 8 */
}
Here is a JS fiddle link to show you how it looks: http://jsfiddle.net/ddxYB/
Make sure to clear the wrapper div. Because it contains only floated elements, it will have no height if you don't. In the example I used, I set heights to save time, but this would just as well if you used automatic heights and let the divs take on the height of the content.
This is a screenshot from the JSFiddle code:
First you have to understand concept of a container.
Create 2 containers as columns:
A left column containing div1
A right column containing div2 and div3
So for the HTML create a structure like this:
<div class="col1">
<div>div 1</div>
</div>
<div class="col2">
<div>div 2</div>
<div>div 3</div>
</div>
And positioning columns with CSS:
div.col1 {
float: left;
width: 200px;
}
div.col2 {
float: left;
width: 400px;
}
Set your CSS position of each div to absolute and position them using margin.
#divName {
position: absolute;
margin: 10px 10px 10px 10px; //position them wherever you want.
}
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result:
I want the top lines of two DIVs (<div></div>) to be aligned horizontally, how to do it?
Steven,
In addition to T. Stone's suggestion to float both divs, a simple way to align two divs is to make both have the display: inline-block; CSS rule and give the lower div the vertical-align: top; CSS rule.
Take a look at this simple jsFiddle example to see how this works.
div {
display: inline-block;
}
div#tall {
height: 4em;
}
div#short {
height: 2em;
vertical-align: top;
}
In response to "is there another way to do it", sure you could use display: inline but you have a bunch of hacks to remember to get it to work in IE6/7. This way is generally better (but it all comes down to the individual circumstances)
<style type="text/css">
.keeper {
overflow: hidden; /* expand to contain floated children */
}
.keeper div {
width: 200px;
height: 30px;
float: left;
border-top: 1px solid red; /* so you can see the 'tops' */
}
</style>
<div class="keeper">
<div>
</div>
<div>
</div>
</div>
Float them in a container.
.parent div { float: left; width: 50%; }
<div class="parent">
<div>1</div>
<div>2</div>
</div>
Note: The sum of the width of the child divs can not be greater than 100% of the parent div, including margin and padding.
Alternative
If maintaining flow with the page isn't a requirement, and all that really matters is aligning, them, the divs can always be positioned absolutely.
.abs { position: absolute; top: 100px; width: 50px; }
.left { left: 0px; }
.right { left: 50px; }
<div class="abs left">1</div>
<div class="abs right">2</div>
I'm sure this a common problem, but couldn't find the exact answer :)
I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
your margin-left of #content should include the width of #left_menu. Thus should be
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
You also don't need a position:absolute for your #main (unless other purposes)
So finally:
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c is to clear and pushes the bottom content off the floats.
What about this its all to do with your width on your container.
This works for me.
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.
The problem is not "staying on the same level", but it's about the size of the container div.
This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079
The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.
try giving the main div an overflow: hidden; and taking away it's position: absolute;
which will give it a height equivalent to the greater height of the floating divs
Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""
#main{
display:inline-block;
width:100%;
}
and remove absolute to the parent;
#left_menu,#content{
....
vertical-align:top;
}