Hi Im trying to create the following structure in div's, but I just need some help getting startet with the css.
The width needs to be 100%
<style type="text/css">
.clear{ clear: both; }
.top{ width: 100%; }
.col{ width: 25%; float: left; }
.col, .top{ text-align: center; }
</style>
<div class="main">
<div class="top clear">Menu</div>
<div class="col">Column1</div>
<div class="col">Column2</div>
<div class="col">Column3</div>
<div class="col">Column4</div>
<div class="clear"></div>
</div>
This will not work if you add border/padding/margin to the columns, use absolue width values if you want to use that.
If you want four floated columns to fill 100% width of any element you may see a slight misalignment at the end of the last column in various browsers. It's easier to get exact alignment (say, with borders) if you work to the width of a container. For example, to reproduce your visual (complete with borders) use the css:
#container {
width: 400px;
text-align: center;
}
#menu {border: 1px solid black;}
#cols div {
float:left;
border-right: 1px solid black;
border-bottom: 1px solid black;
width:99px;
}
#cols div:first-child {
border-left: 1px solid black;
width:98px;
With the html:
<div id="container">
<div id="menu">Menu</div>
<div id="cols">
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
<div>column 4</div>
</div>
</div>
And (as Lekensteyn suggests) make sure any footer or element after the div columns has a clear rule.
You can test this examples here:
http://cssdesk.com/
Related
I'm trying to recreate a web page with a three column design like the page below, but i'm having some trouble. I've tried using nested divs, but the code does not seem to be working for some reason. Here's a snippet of the html and css code
<body>
<div id="container">
<header>
<h1>The CIS 4004 Newsletter</h1>
</header>
<div id="wrapper" role="main">
<nav>
<ul>
<li>Test link; </li>
</ul>
</nav>
<article>
<div class="inner">
<h2>Test header</h2>
<p>Just some test text.
</p>
</div>
</article>
</div>
</div>
</body>
css code is here
#wrapper {
border: 1px solid black;
position:relative;
width:960px;
margin:0 auto;
overflow:hidden;
}
nav{
width: 150px;
float: left;
border: 2px solid black;
position:relative;
}
article.inner {
margin:10px;
padding:20px:
border: 2px solid red;
}
Here's an image of the web page
http://jsfiddle.net/2yjhp/
The simple template
<div class="wrapper">
<div class="left">Left Content</div>
<div class="middle">Middle Content</div>
<div class="right">Right Content</div>
</div>
---CSS---
div.wrapper {width: 1000px; margin: 0px auto;}
div.left {width: 250px; float: left;}
div.middle{float: left;}
div.right{width: 250px; float: left;}
Whether your designing a three column layout or a two column layout the key thing to remember is to floating all the columns in the same direction (left) and adjusting there width accordingly. There is no need to use nested div.
eg:
cloumnone{float: left;
width: 33%;}
similary for other two cloumns...
So I got a question about DIVs. I want 2 rows with 3 divs in each, centered. But the problem is if I do clear: left; all 6 will be next o eachother. Here is how my code looks like right now and I hope you can help me out.
CSS:
.row1 {
position: absolute;
height: 270px;
}
.row2 {
position: absolute;
height: 270px;
}
.columns {
width: 190px;
height: 274;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
}
Here is my HTML:
<div id="row1">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
<div id="row2">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
this is one div:
head text
paragraph text
They are all floating next to each other. You should add a clear row where you want to seperate them. We usually call it clearfix.
<style>
.clearfix{ clear:both; }
</style>
</div>
<div class="clearfix"></div>
<div id="row2">
Try to use "display: inline-block" instead of float and remove "position: absolute". Add closing divs for the columns. And change css for the rows to refer to id, not class.
CSS:
.columns {
display: inline-block;
width: 190px;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
}
#row1 {
height: 270px;
}
#row2 {
height: 270px;
}
HTML:
<div id="row1">
<div class="columns">1.1</div>
<div class="columns">1.2</div>
<div class="columns">1.3</div>
</div>
<div id="row2">
<div class="columns">2.1</div>
<div class="columns">2.2</div>
<div class="columns">2.3</div>
</div>
JsFiddle: http://jsfiddle.net/a5vKH/1/
Guy, Sorry I suck that this
How can i make this all my boxes avoid the spacing made by box 1 so that the box 4 auto adjust on the top
My Fiddle link - http://jsfiddle.net/QKbEk/3/
.grp {
width: 140px;
margin: 0px auto;
}
.box {
background: red;
margin: 3px;
float: left;
width: 50px;
height: 50px
}
You could change your rule for .box4 to:
.box4 {
background: red;
float: left;
margin: 3px;
width: 50px;
height: 50px;
position:relative;
top:-25px;
}
jsFiddle example
This happens because of the rules applied to floated elements. Specifically, "The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.". However by using positioning you can place the box wherever you need.
<div class="grp">
<div style="float:left;width:40%">
<div class="box" style="height: 80px">box 1</div>
<div class="box">box 4</div>
</div>
<div style="float:left;width:40%">
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 5</div>
</div>
</div>
Joshua Johnson post for masonry design: http://designshack.net/articles/css/masonry/
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
I want to center the three divs that appear in the mockup below (all have "float:left").
Is this possible?
I don't mind having wrapper-divs.
Text-align:center and display:inline-block won't work with the code I have.
If you want to center them, you can't float them. A better alternative would be to make them all display: inline-block so you can still stylize them as a block element, and they'll still pay attention to your text-align: center on the parent wrapper. This would appear to be a good solution for the limited example you've provided.
In order to account for browser compatibility, you'd need to change them to <span> rather than <div> before adding the display: inline-block on to them. This would be supported in everything IE7 and up, and all other modern browsers. IE6 would not be supported, but it's only widely used in China anymore.
div#wrapper {
width:960px;
margin: 0 auto;
}
http://jsfiddle.net/WyxHQ/1/
edit:
Moved complete code from fiddle to answer as per suggestion
<div id="outer-wrapper">
<div id="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
HTML
div#outer-wrapper{
border:2px solid black;
padding:10px;
width:100%;
}
CSS
div#wrapper{
width:99px;
margin:0 auto;
}
div {
width:33px;
height:20px;
}
div.one{
background:red;
float:left;
}
div.two{
background:blue;
float:left;
}
div.three{
background:green;
float:left;
}
You can also use a list and get the same results:
CSS:
.wrap
{
border:2px solid black;
width:100%;
}
ul
{
width:99px;
margin:0 auto;
height: 20px;
}
ul li
{
width:33px;
height:20px;
float: left;
margin: 0px;
padding: 0px;
}
ul li.red
{
background-color: red;
}
ul li.blue
{
background-color: blue;
}
ul li.green
{
background-color: green;
}
HTML:
<div class="wrap">
<ul>
<li class="red"> </li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
Try this: http://jsfiddle.net/nvpXx/3/
You can wrap your floated divs with an inline-block element and center it within its parent.
HTML
<div id="main">
<div class="wrap">
<div class="item">thing 1</div>
<div class="item">thing 2</div>
<div class="item">thing 3</div>
<div class="clear"></div>
</div>
</div>
CSS
#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}
Potential Pitfall
This doesn't work well if you have so many floated items that they wrap to a second line. At that point, the div.wrap expands to 100% of its container and as a result everything is off-center.
Try this one, keep it simple:
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>
This will make it responsive although it breaks on some point, it helps to create a media query for the max-width:
<style>
#media screen and (max-width:520px){ ul li{float:none} }
</style>
Fiddle here
Floats, as the name suggests, are completely independent of their containers. So, you cannot center them according to a container, because they will know no container.
Hope this helps:
<body>
<div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">
<div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
</div>
</body>
What I would do is add a container div for them.
Then add overflow:auto so that the container div wraps around the 3 divs and then set the container div in the center with margin:0 auto.