Just have a small css problem...
I have a couple of divs within a div that's all contained within a wrappe,
ie
<div wrapper>
<div bodyWrapper>
<div bodyLeft></div>
<div bodyRight></div>
</div>
</div>
That's not all the code, there is extra between all of them but the problem is with the css. I have the main background of the wrapper set to black and all the rest set to white. The body(left & Right) tags both come up white but the bodywrapper tag sees to have no effect so there is black space under the body tags if they dont have the same length. is there anything i can do to sort it?
here is the css code
#wrapper #bodywrapper {
border: 20px solid #000;
background-color: #FFF;
margin: 0px;
padding: 0px;
height: auto;
width:auto;
}
#wrapper #bodywrapper #bodyleft {
margin: 0px;
height: auto !important;
width: 630px;
float: left;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
overflow: hidden;
}
#wrapper #bodywrapper #bodyright {
margin: 0px;
float: right;
height: auto;
width: 280px;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
color: #FFF;
background-image: none;
}
Faux columns would work but if you're after a pure CSS method you can try equal height columns from www.ejeliot.com
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
This may help, Faux columns: http://www.alistapart.com/articles/fauxcolumns/
Related
What seemed to be a simple task turned out to be quite a problem. I am trying to find a way to both preserve the vertical alignment of green DIVs and to prevent the absolute positioned DIV from overlapping the contents that follows.
Since I had to use absolute positioning not to destroy the alignment, I am now looking for a solution to another problem that showed up as a consequence.
Here is the code:
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
position: relative;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
clear: both;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_container {
position: absolute;
left: 0;
right: 0;
}
.below_gauge2 {
width: 240px;
color: blue;
position: relative;
margin: auto;
}
.below_gauge3 {
width: 240px;
color: blue;
position: relative;
margin: auto;
border: thin solid #F00;
}
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_container">
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one. That has been solved.</div>
<div class="below_gauge3">I do not want the contents of this DIV to overlap the contents below. This DIV can contain any ammount of text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</div>
</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Is there a way to make the DIV with the red border to push down this DIV so the DIV with the red border would not overlap what is below?
</div>
</div>
</div>
I made this code based on the answer (that I accepted) to my question when I had problems with how to allign two green DIVs. As can be seen the solution was to use absolute positioning but now that caused a problem because every absolute positioned element is according to CSS specification removed from the flow.
Try once Left-margin and right-margin.
I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*#import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.
Check out this fiddle for an example:
http://jsfiddle.net/kLMtb/
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table
There are 2 ways I know of to achieve equal height columns.
1) CSS tables
FIDDLE
Markup:
<div id="header">
<p>This is the header.</p>
</div>
<div class="wpr">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
<div id="contentliquid">
<p>Some content</p>
</div>
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footer">
<p>This is the footer.</p>
</div>
CSS
#header {
height: 100px;
background: orange;
}
.wpr
{
display:table;
}
#leftcolumn
{
width: 200px;
background: aqua;
display:table-cell;
}
#rightcolumn
{
width: 200px;
background: pink;
display:table-cell;
}
#contentliquid {
background: yellow;
overflow:hidden;
display:table-cell;
}
#footer
{
clear:both;
background: green;
}
2) Faux columns
Requires a background image with repeat-y (Read the above article).
Something like this:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
I created the simple web page layout that includes : header, left, right and footer div blocks.
This is the html code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
This is the css style :
body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
The web page looks like this:
But when i try to add the left block like on the picture it looks uncorrect. I use this css code for that:
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
DEMO on jsFiddle - http://jsfiddle.net/khbTg/
How can I to put Left div block in the yellow area like on the picture? Thank you for any help.
You just want to float .right to the right. If you can change your markup to:
<div class="header">#header</div>
<div class="container">
<div class="right">
<div class="nav">#nav</div>
</div>
<div class="content">
<div class="article">#article</div>
<div class="article">#article</div>
<div class="article">#article</div>
</div>
</div>
<div class="footer">#footer</div>
You would then want to add the styles:
.container { clear: both; }
.content { width: 80%; }
.right {
width: 20%;
float: right;
}
.content, .right {
margin: 0;
padding: 0;
}
Fiddle: http://jsfiddle.net/YDNsA/1/. I added .container to help clear things, as you don't want to float around .header or .footer. Remember to avoid putting a margin, padding or border on .right or .content.
Would you not need to put:
.left {
float: right;
}
When you use a float, the floated element is removed from document flow and 'floated' - following elements then flow around the floated element. To use a right float the way you wish, the right-floated element .right needs to appear in the DOM before the left element.
Alternatively, float your .left element left, and float your .right element left also - then they will layout correctly.
Don't forget to clear the floats afterwards :)
As a side-alternative, you could set .left and .right to display: inline-block; and this would solve your problem without floats and clears. You do need to then either (a) set font-size to 0 for the parent element to avoid the whitespace issue, or (b) comment out the whitespace between .left and .right. Google it if interested.
I make a a demo file how can you make a simple page layout:
Enjoy it PAGE LAYOUT EXAMPLE
CSS:
header {
width: 400px;
border: 2px solid black;
text-align: center;
margin-bottom: 5px;
}
article {
width: 300px;
height: 400px;
border: 2px solid black;
margin-right: 5px;
float: left;
}
sidebar {
width: 90px;
height: 400px;
border: 2px solid yellow;
float: left;
}
footer {
width: 400px;
border: 2px solid black;
text-align: center;
margin-top: 5px;
clear: both;
float: left;
}
The goal is to center this layout on the screen. I have a min-width of 600px and max-width of 1200px, so there is potentially a lot of white space around the layout.
I've been trying lots of different methods, but am confused about the display:table attribute and how it behaves in this scenario.
Here is the jsFiddle and code: http://jsfiddle.net/7M9rg/6/
Thanks so much for any advice on this!
HTML:
<div id="wrapper">
<div id="header">
</div>
<div id="main">
<div id="side">
<div id="side-stuff">
<ul>
<li>Home</li>
</ul>
</div>
</div>
<div id="content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has</p>
</div>
</div>
<div id="footer">© 2013 </div>
</div>
CSS:
/*css reset*/
html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%;
height:100%;}
div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td, figure {margin:0;padding:0;}
ol,ul {list-style:none;}
li {list-style-type: none;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:
border-box; }
html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
min-width: 650px;
}
#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:130px; /*This must equal the height of your header*/}
#header{
height: 130px; /*This must equal padding bottom of wrap*/
display:block;
padding: 5px;
color: #fff;
border: thin solid #ebebeb;
border-radius: 10px;
margin: 10px;
background-image: url(Images/gradient.png);
background-repeat: repeat-x;
width: 99%;}
#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 99%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 50px; /*This needs to match footer height*/
overflow: auto;
margin-left: 10px;}
#side{
background-color: #fff;
width: 150px;
margin: 10px;
vertical-align: top;
padding-top: 20px;
padding-right: 10px;
display: table-cell;
border-radius: 10px;
border: thin solid #CCC;}
#side-stuff{
display: block;
padding-left: 10px;}
#content{
background-color: #fff;
padding: 10px;
display: table-cell; /*To make sibling columns equal in height*/
margin-bottom:10px;
border-radius: 10px;
border: thin solid #CCC;}
#content-stuff{
width: auto;
height: auto;}
#footer{
position: relative;
height: 40px;
margin-top: -40px; /* margin-top is negative value of height */
margin-left: 10px;
clear: both; /* Use if floating elements */
color: #999;
width: 99%;
border: thin solid #ebebeb;
border-radius: 10px;
background-image: url(Images/footer_gradient.png);
background-repeat: repeat-x;
background-position: bottom;}
Add this to your #wrapper CSS:
max-width: 1200px;
margin: 0 auto;
http://jsfiddle.net/tshz6/
you need to specify width for your <body> or #wrapper element. min-width only specifies the minimum width it can be shrunk to, and width and max-width is set to auto, which is all available width (in this case the screen width).
Try updating your html, body rule to following
html, body {
font-family: Helvetica;
height: 100%;
margin: 0 auto;
min-width: 650px;
max-width: 1200px;
}
I'm trying to make a footer as said here: http://css-tricks.com/left-align-and-right-align-text-on-the-same-line/
The problem is the 2 paragraphs are placed a bit under the footer, as if they where not defined in the div. Here is my code:
<div id="footer" style="clear: both;">
<p class="alignleft">left</p>
<p class="alignright">right</p>
</div>
css:
div#footer{
height: 20px;
padding: 0px 10px;
line-height: 20px;
clear: both;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
Use overflow: hidden; on the container div to clear floats an don't use height
Demo
CSS
div#footer {
padding: 0px 10px;
line-height: 20px;
overflow: hidden;
}
height value should be auto
CSS
#footer{
height: auto;
padding: 0px 10px;
line-height: 20px;
**word-wrap: break-word;**
}