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.
}
Related
I have a container div called main and then two divs floated left. The problem is that I need the main div background color visible (I supposed that the blue color background should be visible on the right side (300px which remains) and at the 4th row of the medium div as it is lower div than the left div). I also need both left and medium divs to automatically increase their heights on words wrapping and as you can see it does not work in the grey (middle) div.
See the http://jsfiddle.net/djqfo3we/2/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
You have to clear the floats otherwise the margins of the parent collapse and it appears that the parent has no height.
There are various techniques for clearing floats and you can find out more with a simple search
As for the text wrapping, as you have discovered long text strings won't break by themselves.
You can force a word break using word-wrap:break-word and leave your original text unchanged.
.main {
width: 500px;
background-color: blue;
overflow: hidden; /* quick clearfix */
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
</div>
Add a div inside the main div but at the bottom called clear:
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
Then give the class clear a style:
.clear {
clear: both;
}
and you get this: http://jsfiddle.net/djqfo3we/4/
EDIT:
As others have pointed out, in order to apply a wrap so that they stay within the set width dimensions, add the style word-wrap: break-word; to the content you want to have wrapped.
I've applied the word-wrap to both the middle and left div within the main div.
updated jsfiddle: http://jsfiddle.net/djqfo3we/10/
.main {
width: 500px;
background-color: blue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.middle {
width: 100px;
float: left;
background-color: gray;
}
.clear {
clear: both;
}
.middle, .left {
word-wrap:break-word;
}
<div class="main">
<div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div>
<div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div>
<div class="clear"></div>
</div>
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 have 2 block-inline divs.
I don't wan't to specify the width of the first one but, I would like the second takes 100% of the remaining space. The container of the two divs take 100% of my screen.
It seems to be possible using jQuery to determine the width of the first div and to set the second value, but I would like to do it in pure css.
How can I do that ?
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.div2 {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="clear">
</div>
Hope it helped.
If you don't want to use jquery then this might worth doing
<div style="width:100%;">
<div style="float:left; display:inline-block;" class="div1">left div</div>
<div style="float:right; display:inline-block;" class="div2">right div</div>
</div>
I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
background: #FF0;
}
.left {
float: left;
width: 50%;
background: #F0F;
}
.left .first {
height: 20%;
}
.left .second {
height: 50%;
}
.left .third {
height: 30%;
}
.right {
float: right;
width: 50%;
}
.right img {
display: block;
max-width: 100%;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</body>
</html>
The short answer is that you can kind of do this, but I don't think it will behave the way you expect.
You would have to declare explicit heights for the two <div>'s -
.left, .right {
height: 100px /*or whatever height you want*/;
}
If this is a static page, and the image never changes, you can manually enter the pixel amount.
If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.
There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.
There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).
Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.
There are a few things you need to do:
You need to float the containers.
You need to add an extra container and nest the divs in the following order:
<div class="container2">
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</div>
Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.
For your CSS:
.container {
width: 100%;
float: left;
position: relative;
right: 50%;
}
.container2 {
width: 100%;
float: left;
overflow:hidden;
position:relative;
}
.left {
float: left;
width: 50%;
left: 50%;
position: relative;
background: #F0F;
}
.right {
float: left;
width: 50%;
left: 50%;
position: relative;
}
Please see this page if you're having difficulties.
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/