I am creating a code for my web programming class. I'm having troubles having my DIV tags to line up. I'm needing them to be equal, and no matter what I do I can't get them to work. The .black and .grey are the same part, and I'm not sure how to make it so they are even.
.css
.main {
background-color:#e3e2e2;
margin-bottom:1em;
padding:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin:93%;
border-radius:20px;
float:left;
margin:20px;
}
.bg1 {
background-color:#d2cdc8;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
width:65%;
float:left;
}
.bg2 {
background-color:#a79f97;
border-top-right-radius:20px;
width:35%;
float:right;
}
.bg3 {
background-color:#a79f97;
border-bottom-right-radius:20px;
width:35%;
float:right;
}
.black {
background-color:#3e3831;
margin-left:10px;
margin-right:10px;
text-align:center;
width:92%;
border-top-left-radius:20px;
border-top-right-radius:20px;
float:right;
margin-top:20px;
margin-right:20px;
margin-left:20px;
color:#d6d3c6;
font-family: TF2Build;
}
.grey {
background-color:#514840;
margin-left:10px;
margin-right:10px;
text-align:center;
width:92%;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
float:right;
margin-bottom:20px;
margin-right:20px;
margin-left:20px;
color:#aba9a8;
}
.html
<div class="bg1">
<div class="main">
<p></p>
</div>
</div>
<div class="bg2">
<div class="black">
<p>Test</p>
</div>
</div>
<div class="bg3">
<div class="grey">
<p>Test</p>
</div>
</div>
Js Fiddle:
http://jsfiddle.net/W4Xb3/1/
I made some changes to your HTML, wrapping it in a "table" div and display the children as tablecells. (dropping .bg3, since it isn't needed)
HTML:
<div class="wrap">
<div class="bg1">
<div class="main">
...
</div>
</div>
<div class="bg2">
<div class="black">
...
</div>
<div class="grey">
...
</div>
</div>
</div>
CSS:
.wrap {
display: table;
width: 100%;
}
.bg1 {
display: table-cell;
vertical-align: top;
}
.bg2 {
width:35%;
display: table-cell;
vertical-align: top;
}
And the updated Fiddle.
You're fighting issues with borders/margins/padding modifying the height/width. IE before v9 used border-box as default, all other browsers and new versions of IE use content-box. The only time I'll admit IE made things easier:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Try border-box on everything then readjust your height/width values.
Related
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/
I want these empty divs to have the same height as fluid div.
http://jsfiddle.net/QLdZs/
html:
<div id="container">
<div class="buffer"></div>
<div class="buffer"></div>
<div class="buffer"></div>
<div id="content">
this is content<br/>
lalala<br/>
lala<br/>
lala<br/>
lalalalala lala la<br/>
o sole mio<br/>
</div>
</div>
css:
#container {
overflow:hidden;
}
.buffer {
float:left;
background-color:red;
width:100px;
min-height:10px;
border-right:1px solid white;
}
#content {
overflow:hidden;
background-color:green;
}
I know I can make #container {position:relative;}, and then set .buffer {position:absolute;height:100%;} but I'll have to set positions for all these buffers seperately, and set margin to #content div. Sometimes I'll have two, three buffers, sometimes none. So this is not the best way of doing it.
Do you have any good idea how can I do this?
Check this article out, I think it's what you need:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I usually just used fixed heights, though.
Quoted from the article:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
And the CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
I need to arrange three columns of divboxes with 33% width of the outer box, besides a fixed-width menu.
http://jsfiddle.net/uvw5c/1/
So i want the red, yellow, green area beides the orange menu, in ANY case of width of #menu.
<div id="container">
<div id="menu">
menu
</div>
<div id="dialogbox">
<div id="outer">
<div class="inner" style="background-color:red;">
col1
</div>
<div class="inner">
col2
</div>
<div class="inner" style="background-color:green;">
col3
</div>
</div>
</div>
</div>
#container{
width:500px;
background-color:grey;
height:300px;
}
#menu{
width:300px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
float:left;
height:100%;
width:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33%;
background-color:yellow;
height:100%;
float:left;
}
Thanks in Advance for any hints!
For this specific case you can do away with a lot of the markup and use display: table; and table-cell;. Set the width of the menu, and the others will automatically fill the rest equally.
HTML:
<div id="container">
<div id="menu">
menu
</div>
<div class="inner" style="background-color:red;">
test
</div>
<div class="inner">
test
</div>
<div class="inner" style="background-color:green;">
test
</div>
</div>
CSS:
#container{
width:500px;
display: table;
height: 300px;
}
#menu{
width: 100px;
background: #00f;
display: table-cell;
}
.inner{
padding:0;
margin:0;
background-color:yellow;
height:100%;
display: table-cell;
}
Fiddle: http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/
Make a div containing both the menu and the .inner elements.
Also check that width of inner must be 33.3% and 33.4% for one element (maybe the one in the middle)
I found a solution with the help of a friend:
http://jsfiddle.net/t39yV/2/
its very smart to use margin-left on the #dialogbox ;)
#container{
width:100%;
background-color:grey;
height:300px;
}
#menu{
width:100px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
margin-left:100px;
height:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33.3%;
background-color:yellow;
height:100%;
float:left;
}
i have div's wrapped under div's my html code is.
<div id="content-row">
<div id="left-box">
<div id="small-box">
</div>
<div id="small-box">
</div>
<div id="small-box">
</div>
<div id="small-box">
</div>
</div>
</div>
and my css is
/*content-row*/
#content-row {
margin: 0 auto!important;
padding-left:50px;
width:990px;
height:320px;
padding-bottom:20px;
}
#left-box {
float:left;
width:360px;
height:340px;
}
#small-box {
width:160px;
height:150px;
background-color:#fff;
float:left;
margin:0px 20px 20px 0px;
}
the above style sheet is exclusively for ie6. my problem is the left-box is taking an extra 20px at the right side. when i have defined the left-box to be 360px; it it taking as 380px;
here is the link to the full code.
http://jsfiddle.net/HXGsT/
what is wrong with the code?
It's a known bg in IE6, see this page for more information:
http://www.positioniseverything.net/explorer/doubled-margin.html
Basically, the quick fix is to also add display: inline; to the floating element.
In response to your comment:
<div class="content-row">
<div id="left-box">
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
</div>
</div>
.content-row {
margin: 0 auto!important;
padding-left:50px;
width:990px;
height:320px;
padding-bottom:20px;
}
#left-box {
float:left;
width:360px;
height:340px;
}
.small-box {
width:160px;
height:150px;
background-color:#fff;
float:left;
margin:0px 20px 20px 0px;
}
The id #left-box can be an ID as there is only one of these elements with id="left-box" in the document, but because the others are repeated, they must be defined with classes :)