I am learning CSS and while practicing I was trying to copy this page.
Here is my screenshot. I want the left column (the one with white background and blue border-bottom) to fill up 100% in height. The whole middle portion is divided into three boxes(div). First there is a "columns" div which contain two divs "left_column" and "right_column". The border of "columns" div can be seen in yellow color. I tried setting "height:100%" for "left_column" but its not working. Can anyone please suggest me what I am doing wrong?
Here is my css file:
#left_column {
width: 65%;
height: 100%;
float: left;
font-size: 80%;
color: #414342;
background-color: white;
border-bottom: 1px solid blue;
text-align: justify;
overflow: hidden;
}
#left_column h2 {
color: #3399FF;
padding: 0 15px;
}
#left_column p {
padding: 0 15px;
}
#right_column {
width: 35%;
float: right;
font-size: 80%;
background-color: #424D47;
color: #8BC7D3;
}
#right_column h2,h3,h4 {
color: #3399FF;
padding: 0 15px;
}
#right_column p {
padding: 0 15px;
}
#columns {
border: 1px solid yellow;
overflow: hidden;
margin: 0;
}
#columns p {
font-family: "sans serif";
line-height: 1.5em;
}
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Cloudy Water Sports</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="outer_frame">
<div id="header">
<img src="images/header.jpg" alt="Cloudy Water"/>
<h1>CLOUDY WATER SPORTS</h1>
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>BLOG</li>
<li>GALLERY</li>
<li>ABOUT CWS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="columns">
<div id="left_column">
<h2>Hello!</h2>
<p>
Free Cloudy Water Sports template is yours to use.
</p>
<p>
Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.
</p>
<ul>
<li>One for all and all for one.</li>
<li>I never spend much time in School.</li>
<li>Soaring through all the galaxies.</li>
</ul>
<p>
One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.
</p>
</div>
<div id="right_column">
<h2>What's New?</h2>
<h4>There's a voice</h4>
<p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. More…</p>
<h4>Every stop I make</h4>
<p>Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on. More...</p>
<h4>Hong Kong Phooey</h4>
<p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. More…</p>
<h3>Archive</h3>
<ul>
<li>One for all</li>
<li>Can't stay for long</li>
<li>Muskehounds</li>
<li>Hong Kong Phooey</li>
</ul>
</div>
</div>
<div id="footer">
<p>Copyright © 2006 YOUR SITE NAME.</p>
<p>Design by 360guide.info</p>
</div>
</div>
</body>
</html>
Right.
The way this is working is, you have a parent element with no height. So any child that goes in the parent cannot have a percentage height because:
20% of nothing = nothing
100% of nothing = nothing
If the child has content it will default to the size that the content is.
If you have the parent a height in px:
20% of 100px = 20px
100% of 100px = 100px
So thats how that works.
Solution to your code, as its the right column that is bigger we could use display: table; this will allow us to get the cells to be equal height (whatever the bigger height is).
Change CSS:
#columns {
display: table;
border: 1px solid yellow;
overflow: hidden;
margin: 0;
height: 800px;
}
#left_column {
width: 65%;
height: 100%;
display: table-cell;
font-size: 80%;
color: #414342;
background-color: white;
border-bottom: 1px solid red;
text-align: justify;
overflow: hidden;
}
#right_column {
display: table-cell;
width: 35%;
font-size: 80%;
background-color: #424D47;
color: #8BC7D3;
}
DEMO
Any question feel free to ask.
I suggest option emulation of equal height columns CODEPEN
<body>
<div class="wrapper">
<header class="header">
<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
</header><!-- .header-->
<div class="middle">
<div class="container">
<main class="content">
<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
Expand column </main><!-- .content -->
</div><!-- .container-->
<aside class="right-sidebar">
<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
Expand column </aside><!-- .right-sidebar -->
</div><!-- .middle-->
<footer class="footer">
<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</footer><!-- .footer -->
</div><!-- .wrapper -->
</body>
body {
font: 12px/18px Arial, sans-serif;
width: 100%;
}
/* Begin of styles for the demo (you can remove them) */
a.expand {
width: 90px;
display: block;
margin: 10px 0 0;
}
a.expand:hover {
height: 500px;
}
/* End of of styles for the demo */
.wrapper {
width: 960px;
margin: 0 auto;
}
/* Header
-----------------------------------------------------------------------------*/
.header {
height: 150px;
background: #FFE680;
}
/* Middle
-----------------------------------------------------------------------------*/
.middle {
border-right: 250px solid #FFACAA;
position: relative;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
float: left;
overflow: hidden;
margin-right: -100%;
}
.content {
padding: 0 20px;
}
/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
float: right;
margin-right: -250px;
width: 250px;
position: relative;
background: #FFACAA;
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
height: 100px;
background: #BFF08E;
}
try this code:
#columns{
position:relative;
background-color:#fff;
}
#left_column{
width: 65%;
float: left;
font-size: 80%;
color: #414342;
text-align: justify;
position:relative;
z-index:1;
}
#right_column {
width: 35%;
float: right;
font-size: 80%;
background-color: #424D47;
color: #8BC7D3;
position:relative;
z-index:1;
}
.right_dummy{
position:absolute;
width: 35%;
height:100%;
background-color: #424D47;
z-index:0'
right:0;
top:0;
}
.clearB{
clear:both;
}
html:
<div id="columns">
<div id="left_columns">TEXT HERE.....</div>
<div id="right_columns">TEXT HERE.....</div>
<div class="right_dummy"></div>
<div class="clearB"></div>
</div>
add this css's:
#columns, #outer_frame, html, body, form {
height:100%;
}
For height:100% to work propely all container parents must also have the height set to 100%
Related
I am working on my portfolio for school (I am a developer on Mediacollege Amsterdam) and I need help with my css. I have searched for answers, but I cannot get my page as desired. I have 3 divs, i want 2 of them to be next to each other and the third one below the first one, how would I do that?
I want the picture where it's at and I want the block that starts with "my tasks" where it is, but I want the block that starts with "About the game" positioned directly underneath the image
This is how I have the divs sorted, the div gameplay is the video, the div info is the "my tasks" block and the about div is the "about the game" block.
<div class="item">
<div class="legend">Fear The Blue</div>
<div class="content">
<div class="gameplay">
<video autoplay loop muted>
<source src="resources/video/portfolioVideos/FTB.webm" type="video/webm" />
<source src="resources/video/portfolioVideos/FTB.mp4" type="video/mp4" />
Video not available :(
</video>
</div>
<div class="info">
<span class="tit">My tasks:</span>
<ul>
<li>Puzzle logic</li>
<li>First puzzle</li>
<li>Second puzzle</li>
<li>Audio Manager</li>
<li>Controller support</li>
<li>Inventory</li>
<li>Outline Shader</li>
<li>Movement</li>
<li>Start menu</li>
<li>VR support</li>
<li>Keypad logic</li>
<li>Performance improvements</li>
<li>Door/teleport logic</li>
</ul>
<span class="tit">Engine:</span> Unity3D
<br />
<span class="tit">Language:</span> C#
<br />
<span class="tit">team:</span>
<ul>
<li>2 programmers</li>
<li>3 artists</li>
<li>2 mediamanagers</li>
</ul>
</div>
<div class="about">
<span class="tit">About the game:</span>
<ul>
<li>Single player puzzle game</li>
<li>Oculus support</li>
<li>Best played with controller</li>
</ul>
I've chosen to put this game on my portfolio, because this is my first oculus game. I am also proud of my audiomanager class, inventory class and the endproduct.
</div>
</div>
<div class="foot">
<img class="git" src="resources/images/resources/GithubIcon.png" />
<!--<img class="trailer" src="Images/resources/filmklapper.png"/>-->
<a><img class="game" src="resources/images/resources/controller.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac.zip" web="SchoolFiles/IDP/FearTheBlue/web-build/FearTheBlue.html" /></a>
<a><img class="game" src="resources/images/resources/oculus.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win_Oculus.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac_Oculus.zip" /></a>
</div>
</div>
My full css:
.item
{
font-family: normalFont, sans-serif;
margin: 0.9em auto 0.5em auto;
background-color: #222222;
border-radius: 1em;
display: block;
color: white;
width: 95%;
}
.item .legend
{
font-family: headerFont, sans-serif;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
padding: 0.2em 0 0.2em 0.4em;
background-color: #4CAF50;
font-size: 1.2em;
}
.item .content{padding: .5em;}
.item .gameplay
{
max-width: 100%;
display: block;
margin: 0 auto;
}
.item .gameplay video{width: 100%;}
.item .gameplay img{width: 100%;}
.item .info
{
text-align: left;
display: block;
height: auto;
}
.item .info :visited,
.item .info a:link
{
text-decoration: none;
color: darkorange;
}
.item .info a:hover
{
text-decoration: underline;
color: lightblue;
}
.tit{color: #4CAF50;}
.item ul
{
padding: 0 0 0 1em;
margin: 0;
}
.item li{list-style-type: "- ";}
.item .foot
{
border-radius: 0;
border-bottom-right-radius: .5em;
border-bottom-left-radius: .5em;
background-color: #4CAF50;
width: 100%;
height: 2em;
}
.item .foot a
{
margin: 0.05em 0 0 0.6em;
display: inline-block;
width: 30px;
float: left;
}
.item .foot img
{
cursor: pointer;
width: 100%;
}
.item .foot .game, .item .foot .git{margin-top: 1px;}
#popup .message
{
text-align: center;
margin: 1em;
}
#popup
{
width:11em;
border-radius: .5em;
outline:none;
height:7em;
background-size: 100% 100%;
background-color: #333;
z-index:2;
position:absolute;
margin:0 0 0 -4.56em;
}
.input-group
{
width: 85% !important;
margin: .5em auto !important;
}
.input-field
{
background-color: #222 !important;
border: 1px solid #111 !important;
}
.input-field:hover
{
background-color: #111 !important;
}
.icon-background
{
border: 1px solid #111 !important;
}
#media screen and (min-width:600px){.item{width: 80%;}}
#media screen and (min-width:1000px)
{
.item{width: 60%;}
.item .legend{font-size: 2em;}
.item .gameplay
{
display: inline-block;
margin-top: .3em;
width: 25em;
float: left;
}
.item .about
{
width: 20em;
}
.item .info
{
display: inline-block;
margin: 0 0 0 1em;
max-width: 40%;
}
}
regards,
Dani
Try removing the property
float:left for the image div
Or you can put the two divs that want to be one below the other in one big div and the div you want at right outside in a different div.
From the information you provided, I think you're trying to make a 2 column layout. If you're floating all of your div containers to the left, since you added your "about" div last in your html and because your 2 first div's take up the full width of the container, your third div will be positioned below the div with the greatest height. If you want to avoid this You should use 2 divs (one for each column). Float them both left and add your content inside your respective columns.
.container {
position: relative;
width:100%;
}
.col1{
position: relative;
float:left;
width:60%;
}
.col2 {
position: relative;
float: left;
width: 40%;
}
img {
max-width:100%;
}
<div class="container">
<div class="col1">
<div class="image">
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg" />
</div>
<div class="about">
bla bla bla
</div>
</div>
<div class="col2">Cras quis venenatis est, in pretium eros. Duis a rutrum sem, ac ultricies nunc. Nulla non placerat turpis, a elementum lorem. Duis porttitor, tortor eu congue feugiat, arcu dolor pellentesque ante, sit amet ullamcorper mauris elit quis dui. Suspendisse sem lacus, viverra eget nunc id, ornare volutpat eros. Aliquam erat volutpat. Maecenas eu efficitur neque. Curabitur tortor ex, dictum tempor neque vitae, semper suscipit arcu. In at velit non velit molestie fringilla nec a nunc. Integer et tincidunt risus. Integer finibus, arcu eu hendrerit tincidunt, ante urna vestibulum ante, sit amet accumsan turpis purus id arcu. Curabitur non aliquet sapien, malesuada imperdiet orci. Sed posuere lectus ac nulla viverra, consequat semper lorem commodo. In fermentum nisl lacus, non congue velit sagittis sit amet. Phasellus mollis diam mi, id mollis lectus imperdiet ut. Mauris egestas neque urna, vehicula cursus nisi auctor vitae.
Aliquam ornare vitae urna auctor pretium. Ut vestibulum suscipit volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra lorem non ex maximus, tempus gravida justo tempus. Pellentesque fermentum volutpat tortor ut pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur mattis tortor. Fusce et lectus pulvinar, sollicitudin leo interdum, molestie risus. Nullam non consectetur arcu. Phasellus congue, eros vel euismod pulvinar, erat ex viverra velit, vitae bibendum arcu odio in dolor. Maecenas efficitur massa faucibus pretium accumsan. Duis id suscipit neque.
Nulla pulvinar tempus dui, vitae pellentesque orci dapibus id. Nullam hendrerit egestas dui. Nullam tempus mattis dui. Proin in rutrum purus. Vivamus tempor justo mauris, non bibendum dui luctus ac. Nunc vulputate libero velit, sed auctor nulla mattis ut. Nullam finibus mollis ante eget rhoncus. Suspendisse at purus ante. Vivamus tristique felis eu quam pulvinar, nec viverra quam porta. Phasellus gravida enim non sem facilisis maximus. In varius ac lacus nec convallis. Quisque molestie commodo mi in fermentum.
</div>
</div>
This is very basic CSS and I'm sure if you google enough you will find other grid methods (as mentioned above) that will make your layouts a whole lot easier. Hope this helps.
I am trying to make a decent layout on my page, I have menu, content section and a footer.
I divided menu/content/section in half and put some text/images there. I am trying to position images in the middle of the div.
* {
box-sizing: border-box;
}
.clear {
clear: both;
}
.mainWidth {
width: 900px;
margin: 0 auto;
border: 2px solid pink;
}
.menu {
width: 100%;
height: 20%;
border: 1px solid blue;
background: grey;
}
#menuLeft {
width: 50%;
float: left;
}
#menuRight {
float: right;
}
#menuRight li {
display: inline-block;
background: red;
}
.content {
border: 1px solid orange;
margin: 150px auto;
}
#contentHalf {
float: left;
width: 50%;
}
#contentHalf2 {
float: right;
}
.footer {
height: 200px;
border: 1px green solid;
background: grey;
}
#footerLeft {
float: left;
width: 50%;
}
#footerRight {
float: right;
}
<div class="menu">
<div class="mainWidth">
<div id="menuLeft">
<img src="images/jez.jpg" width="205px" height="136px">
</div>
<div id="menuRight">
<ul>
<li>Start</li>
<li>O nas</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div class="content">
<div class="mainWidth">
<div id="contentHalf">
<h1>Tytul</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac
eleifend. Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus
erat pretium.
</p>
</div>
<div id="contentHalf2">
<img src="images/bg.jpg" width="213px" height="142px">
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<div class="mainWidth">
<div id="footerLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac eleifend.
Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus erat
pretium.
</p>
</div>
<div id="footerRight">
<img src="images/bg.jpg" width="213px" height="142px">
</div>
</div>
</div>
First at all. if you want 2 containers side by side 50% each, the right way to do it is BOTH floating left and both with 50% width... so to start:
#menuLeft {
width: 50%;
float: left;
}
#menuRight {
width: 50%;
float: left;
}
#contentHalf {
float: left;
width: 50%;
}
#contentHalf2 {
float: left;
width: 50%;
}
#footerLeft {
float: left;
width: 50%;
}
#footerRight {
float: left;
width: 50%;
}
assuming you want the ul of your header at the right, then just add:
#menuRight {
text-align:right;
}
as your li's are already inline-block they will behave as you wish.
same with your images. In this case you want them centered, so just add:
#contentHalf2 {
text-align:center;
}
#footerRight {
text-align:center;
}
is this what you are looking for? FIDDLE
I believe this is what you were trying to achieve: https://jsfiddle.net/u06x2hof/
That is, having the images centred within their respective 'halves'.
Of course the easiest way to centre stuff in CSS is with display : flex; and justify-content : center;, so that's what I've done.
In advance, thank you all.
I'm learning. So I messed up my layout, and can't figure out to solve it.
I basically have a container who contains 3 divs (some blocks of text).
The main container should be <div id="main">. It has 1024px width and 500px height.
It should contain the 3 articles or 3 divs. They should spread horizontal.
The first "article" should be 67px from the left of the "main div".
The third "article" should also be 67px from the right of the "main div".
Between the articles there should be around 55px space, or around that value.
I read that I need to nest those articles into another div (<div class=artcontainer">) and do margin: 0 auto
I did it but not so good.
Here is the jsfiddle
<div id="main">
<div class="artcontainer">
<article class="pulllft">
<h2>Adipiscing elit</h2>
<br>
<p>Mauris malesuada dapibus ornare. Aenean molestie, lorem vitae eleifend tincidunt, ipsum nibh cursus libero, ac molestie magna sem in eros. Interdum et malesfaucibus. Integer at id nulla congue. Praesent quis dolor mattis, vitae feugiat erat commodo.Read More</p>
</article>
<article class="pulllft">
<h2>Lorem Ipsun</h2>
<br>
<p>Suspendisse id varius enim. Nulla facilisi. Pellentesque dapibus, ut luctus faucibus, erat metus tempor sem, a fringilla lacus diam a massa. Praesent porta, augue vel suscipit convallis, augue velit ultricies mauris, ut tempor massa ipsum ut magna.</p>
</article>
<article class="pulllft">
<h2>Lorem Ipsun</h2>
<br>
<p>Aliquam in mauris nulla. Cras neque mauris, congue vitae dignissim eu, euismod sit amet dolor. Etiam luctus tempor interdumEtiam in mi feugiat, rutrum nulla eget, posuere nibh. Mauris rhoncus velit nec leo luctus, ut dictum dolor laoreet. In consequat risus lectus.</p></article>
</div>
Also I'm interested if I used right properties, in a desperate attempt, I clicked what I need to and don't need. And is the use of article tag ok for this, or should I use some other tag.
The Css:
#main {
width: 1024px;
float: left;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: rgba(51,51,51,1);
z-index: 99;
height: 500px;
position: static;
/* [disabled]visibility: inherit; */
background-color: #f3f2f1;
clear: both;
overflow: hidden;
text-align: center;
}
.pulllft {
width: 274px;
text-align: justify;
line-height: 1.3em;
float: left;
color: rgba(79,30,31,.8);
font-family: "Exo 2", "sans-serif;";
font-weight: 400;
font-size: 1.3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
height: 300px;
margin-top: 100px;
}
.artcontainer {
width: 895px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: rgba(0,153,102,1);
}
Is this what you are looking for?
What I changed:
So first off, you had the wrong width of the inner div; you wanted it to have 67px margins on each side in a 1024px width div.
1024 - 2(67) = 890
You had 895.
Secondly, you wanted 55px between the three articles, so subtract that from the width of the container:
890 - 2(55) = 780
Divide it by 3 for the 3 articles:
780 / 3 = 260
There's your width.
Then apply the padding to the right side of the articles:
.pulllft
{
padding-right: 55px;
}
And don't apply to the last child:
.pulllft:last-child
{
padding-right: 0;
}
I know this will be easy for someone experienced in CSS. I made a mock-up of my code here to show what I have. I'm trying to get the background colors, pink and green, extend to the bottom of the white column... or whichever one is longest. I thought the clear:both would work but I'm missing something I know is simple. Help appreciated, snickers expected.
JSFiddle
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:lightblue;
}
#mainColumn {
float: left;
margin-left: 0;
margin-right: 0;
width: 830px;
background-color: white;
}
#leftColumn {
float: left;
margin-left: 0;
margin-right: 0;
width: 195px; /* modified - shortened */
background-color:pink;
}
#rightColumn {
float: left;
width: 195px;
background-color:green;
}
#myWrapper {
background-color: black;
}
.clearit {
clear: both;
}
</style>
</head>
<body>
<div id="myWrapper">
<div id="leftColumn">
some content
</div>
<div id="mainColumn">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper urna a magna euismod, vitae dapibus justo feugiat. Pellentesque ac dui lorem. Fusce ligula urna, ultrices a lectus sit amet, luctus semper est. Curabitur a egestas elit, vitae tincidunt elit. Donec quis nunc id nibh fermentum lobortis egestas id eros. Aenean eget purus erat. In auctor, ipsum in dapibus imperdiet, nulla elit posuere neque, ultrices convallis ligula odio eget felis. Maecenas quis turpis nulla. Nam a velit non lorem semper tincidunt eget iaculis sem. Donec vitae venenatis libero. Duis consequat augue sed sapien cursus dapibus.
</div>
<div id="rightColumn">
even more content
</div>
</div>
<div id="EvenUp" class="clearit">
</div>
<p> On with life </p>
</body>
One solution is to place both left and right columns inside mainColumn and use display:table and display:table-cell
css
body {
background-color:lightblue;
}
#mainColumn {
margin-left: 0;
margin-right: 0;
width: 830px;
background-color: white;
display: table;
}
#leftColumn {
display: table-cell;
margin-left: 0;
margin-right: 0;
width: 195px;
/* modified - shortened */
background-color:pink;
}
#rightColumn {
display: table-cell;
width: 195px;
background-color:green;
}
#myWrapper {
background-color: black;
}
.clearit {
clear: both;
}
fiddle
I have simple site, with the classic elements: Container, Header, Content and Footer. The container has a background-color, which covers the whole content of the site (including header, content and footer). For some reason this won't work with floated elements within the container.
I have found a solution at StackOverflow, but it doesn't feel right. Solution is to set { display: table; } onto the container id.
The page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
body
{
background-color: #999;
font-family: Tahoma;
font-size: 12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin: 0px;
padding: 0px;
}
h1
{
color: green;
font-family:Tahoma;
font-size: 26px;
font-weight: bold;
margin: 5px 0;
text-indent: 10px;
width: 100%;
}
#container
{
background: #FFF;
margin: 0 auto;
width: 950px;
position: relative;
}
#header
{
position: relative;
height: 100px;
width: 950px;
}
#content, #content-ext
{
float: left;
margin: 0;
width: 950px;
}
#nav
{
float: left;
padding: 10px 10px 10px 0;
width: 200px;
}
ul#menu
{
cursor: pointer;
display: block;
list-style: none outside none;
margin: 0 auto;
padding: 0;
text-align: left;
width: 200px;
}
ul#menu li
{
margin: 0;
padding: 0;
}
ul#menu li a
{
color: #111;
display: inline-block;
height: 50px;
font-size: 18px;
line-height: 60px;
margin: 0 auto;
padding: 0 0 0 10px;
text-decoration: none;
width: 100%;
}
#mainImg
{
background: #111;
height: 150px;
float: right;
margin: 0 0 20px 0;
width: 710px;
}
#main-content
{
float: right;
width: 710px;
}
#extra
{
float: left;
width: 500px;
}
#contact
{
float: left;
width: 450px;
}
#footer
{
color:#999;
height:20px;
width:950px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>test</h1>
</div>
<div id="content">
<div id="nav">
<h1>Menu</h1>
<ul id="menu">
<li>Home</li>
<li>Contact</li>
</ul>
</div>
<div id="mainImg"></div>
<div id="main-content">
<h1>Welkom</h1>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed arcu arcu, a interdum metus. Aenean vel libero nulla. Nulla facilisi. Maecenas malesuada libero a ante vulputate vestibulum. Cras id neque vitae lectus luctus tempor non non risus. Morbi aliquam porttitor facilisis. Sed pulvinar erat sit amet est auctor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget arcu lorem, non accumsan ipsum. Donec venenatis adipiscing massa, sed molestie augue ullamcorper et.</strong>
<br/><br/>
Morbi id eros vitae risus tristique bibendum. Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel, volutpat eget sapien. Proin tempus nunc sit amet ligula viverra hendrerit. Donec tempus tristique risus. Fusce at semper est. Etiam ligula est, varius ut tempus at, laoreet bibendum eros. In hac habitasse platea dictumst.</p>
</div>
</div>
<div id="content-ext">
<div id="extra">
<h1>Extra</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Does any has a decent solution for using floated elements within a container? And showing the container as overall background?
Well, there is two classic solutions:
Set "overflow: hidden;" to #container. It will clear floats but have drawback — if you have elements with "position: absolute;" inside container that must be positioned partially outside it, they will be cut by overflow.
Use clearfix hack on #container: http://www.webtoolkit.info/css-clearfix.html it will fix it for you and don't have this drawbacks but is more complex.
Not sure is it better then "display: table;" or not, through.
Leave Display:table, it's not a good solution for a simple problem.
You are starting with a simple layout, and it's a good practice to start with a clean and tested layout.
My favorite resources are:
Little boxes
Free-css
code sucks
good luck