I am new to the world of coding as well as CSS and am confused by the relationships each div tag has with its predecessor or parent. For example, my code is as below. A copy of the entire code is at the bottom of this question if that should make a difference.
Now if I were to zoom into just look at the container <div id="content">, is it safe to assume and say that its child <div id="innercontent"> is only affected by <div id="content">. The same principle would hold that <div id="content"> is affected by <div id="header">. Hence my CSS box model approach would be affected by each of the preceding div elements. Is that correct?
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
</div>
<div id="footer">footer</div>
<div>
</body>
ENTIRE CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Example</title>
<base href="" />
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#wrapper {
/* background-image: url('images/bg-inner-page.gif'); */
background-color: #808080;
height: 200px;
}
#innerwrapper {
width: 960px;
overflow: auto;
}
#header {
}
#logo {
float: left;
margin-top: 20px;
margin-left: 50px;
background-color: gray;
}
#topnav {
float: left;
margin-top: 50px;
margin-left:30px;
color: #ffffff;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
clear: both;
}
#innercontent {
float: left;
margin-top: 100px;
margin-left: 225px;
margin-bottom: 20px;
width: 400px;
}
#rightcol {
float: left;
margin-top: 125px;
margin-left: 50px;
width: 200px;
}
#footer {
background-color: gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
</div>
<div id="footer">footer</div>
<div>
</body>
</html>
HTML is strutured into what is known as the Document Object Model http://en.wikipedia.org/wiki/Document_Object_Model .
Child divs are affected only by its parent elements (or any grandparent further up). However, when you start floating elements around, as your example shows, you may find that elements outside of their container start to interfere.
On the screen this can cause chaos as the elements push each other around to align, however, the DOM will always remain structured, independent of any css.
Related
I created a website which basically consists of a button and everytime that you click on the button a sentence appears above it.
As Background I´ve set a picture. On Mobile I have the Problem that when a long sentence appears the content gets stretched so much that you have to scroll to reach the bottom of the page and at the bottom of the page appears a blank space underneath the picture. This whitespace doesnt appear in the developer tool though, just on my real phone.
So far I´ve been searching quite some time looking for a solution but i didnt find one. I though about disabling background-repeat: no-repeat; in media query but this would have unnice side effects.
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
}
body {
background-image: url('../Images/BG.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
This is the HTML
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
I want the background-picture to allways fill the whole screen and to have no white spaces.
Greetings and thanks for your help.
The problem as i guess is happening because of your content overflowing its container block, so the body shows the white extra space on the bottom because text took more space than it should,one of the solutions that i found to your problem is by setting your vertical overflow to auto using overflow-y:auto
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-y:auto;
}
body {
background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.
Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.
Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.
Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.
Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
PS: the background image and the text are just for demonstration.
I am studying html and css and I currently have this code that I am working on. The everything was working fine. I was adding code little by little and then it was not working as expected. Here is the code:
<!doctype html>
<html lang="en-us">
<head>
<title>Home</title>
<style>
nav, header{ display: block;
}
nav[role="navigation"]{
background-color: red;
font-family: Helvetica;
text-transform: uppercase;
width: 100%;
}
nav[role="navigation"] li{
float: left;
}
nav[role="navigation"] li a:hover {
color: #fff;
}
nav[role="navigation"] ul {
margin: 0px;
}
nav[role="navigation"] a {
float: left;
margin: 0.625em 2em .625em 0;
text-decoration: none;
}
header{
background: #e3e0d9;
}
#container {
width: 95%;
/* 10px / 16px top
10px / 948px right and left
24px / 16px bottom
*/
padding: 0.625em 1.05% 1.5em;
margin: 0 auto;
background-color: yellow;
}
aside{
float: right;
background-color: cyan;
/* 300px / 948px */
width: 31.64%;
}
aside img, .main img, .slats img{
width: 100%; /* occupy 100% of container */
max-width: 100%;
}
ul.tags li{
float: left;
font-size: 14px;
margin: 0 5px 5px 0;
}
ul.tags li a{
background: #9D0000 url(tag-bg.png) no-repeat 0 50%;
color: #fff;
float: left;
font-weight: normal;
padding: 5px 10px 6px 25px;
}
.main{
background-color: pink;
float: left;
/* 624px / 948px */
width: 65.82%;
/* 24px / 948px */
margin-right: 2.53%;
}
</style>
</head>
<body id="top">
<!-- start of navigation-->
<nav role="navigation">
<div class="inner">
<ul class="nav">
<li class="active">Football</li>
<li>Baseball</li>
<li>Soccer</li>
<li>Tennis</li>
<li>Ice Soccer</li>
<li>Basketball</li>
</ul>
</div>
</nav>
<!--end of navigation-->
<!--start of header-->
<header role="banner">
<div class="inner">
<h1 class="logo"><img src="logo.png" alt="YetAnotherSportsSite" /></h1>
</div>
</header>
<!--end of header-->
<!-- start of container -->
<div id="container">
<!-- start of article -->
<article class="main" role="main">
<h1>That guy has the ball</h1>
<p class="summary">In what has to be considered a development of the utmost importance, that man over there now has the ball.</p>
<p class="articleinfo">By Rick Boucher | <time>January 1, 2012</time></p>
<section>
<img src="images/football.jpg" alt="Football" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan felis quis nibh pretium tempus. Nullam quis rhoncus massa. Vivamus laoreet convallis sem ac dapibus. Donec varius congue sem ac molestie. Nam purus neque, tincidunt ut aliquam dapibus, dictum a magna. Curabitur sagittis mi et ante aliquet tristique vitae nec justo. Quisque id tellus et quam pharetra lacinia nec id eros. Praesent fermentum dui id tellus aliquam tincidunt. Suspendisse eu ante sed est vestibulum dictum at sit amet nulla. Sed sed leo at ante consequat ullamcorper. Fusce mattis, justo sed eleifend bibendum, nunc risus pharetra est, ut rutrum libero justo et leo. Maecenas felis orci, porttitor eu venenatis vel, posuere in arcu. Phasellus sagittis pretium purus, vel semper massa aliquet sit amet.</p>
<p>In hac habitasse platea dictumst. Sed vitae libero et dui lobortis accumsan et non nisi. Suspendisse commodo purus vitae risus rutrum eget scelerisque erat vehicula. Nullam eu nunc purus. Nulla rutrum laoreet magna eu pharetra. In libero dolor, varius sed tempor quis, tempus a turpis. Nullam suscipit, nisi a cursus viverra, sapien dolor scelerisque mauris, auctor mattis leo ante auctor enim. Suspendisse nec sodales risus. Donec suscipit, justo eu tincidunt venenatis, metus odio rhoncus quam, mollis accumsan diam eros quis lectus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean facilisis placerat dolor ut mattis. Duis vitae sem sapien. Vivamus orci mauris, ornare in fringilla vitae, pulvinar ut orci. Fusce pellentesque leo id arcu varius elementum. Vivamus id odio ac sapien pulvinar rutrum ut vitae libero. Nam eget rutrum mauris.</p>
<p>Curabitur ultrices dictum eros sed dignissim. Nam blandit iaculis tincidunt. Proin semper, arcu in cursus tincidunt, orci neque congue nunc, eu sodales enim diam eu ligula. Donec condimentum consequat convallis. Sed id est nisi, eleifend gravida justo. Sed consectetur posuere magna sit amet imperdiet. Vestibulum rhoncus nisl vel sapien viverra eget feugiat magna cursus. Nullam scelerisque ultricies lacus vel sodales. Aliquam felis magna, interdum placerat viverra non, sodales eget augue. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent nec neque quis odio hendrerit auctor nec vel erat. In ullamcorper nulla sed ipsum elementum varius. Morbi et sapien ac nisl suscipit tincidunt. Sed lacus nisl, tempus vel ultrices vel, vulputate a nunc. Suspendisse in diam vitae nulla tempor vulputate quis ac nunc.</p>
<p>Nam in dui eget augue malesuada adipiscing ac at massa. In sed auctor libero. Quisque egestas mollis lobortis. Vivamus lacinia metus at quam posuere condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ipsum mauris, facilisis ut pharetra ut, lacinia vitae velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris imperdiet facilisis ligula, sed pharetra metus malesuada sed. Suspendisse tristique massa in magna posuere adipiscing. Ut semper magna facilisis justo dapibus vel auctor odio imperdiet. Donec non nulla fermentum erat condimentum ultrices et vel augue. Aenean aliquam neque ut nisi scelerisque sagittis. Phasellus quam odio, hendrerit et viverra sed, pellentesque vitae est. Praesent consequat, neque nec interdum accumsan, nibh lorem hendrerit arcu, et posuere nunc massa ac augue. Nam justo augue, consectetur sit amet tempus sit amet, faucibus ut magna. Donec semper, mi in adipiscing tincidunt, justo purus suscipit libero, dictum iaculis arcu augue a arcu.</p>
<p>Aliquam feugiat venenatis porttitor. Fusce feugiat, arcu tristique cursus dignissim, magna nulla facilisis tortor, sed rutrum nisl dolor a augue. Etiam a ornare libero. Fusce massa nulla, gravida nec volutpat eleifend, venenatis nec nunc. Nam pulvinar iaculis ligula a luctus. Fusce vulputate odio id purus dictum placerat. Nullam condimentum, sem ac mattis congue, mi enim interdum risus, id rhoncus velit neque et magna.</p>
<p>Pellentesque vestibulum rhoncus sollicitudin. Cras eget purus velit. Donec et quam elit, sed interdum diam. Fusce a dolor a elit tincidunt dictum et non orci. Integer aliquam vehicula elit at vehicula. Nam nec magna libero. Maecenas porttitor, tortor eget congue lobortis, dolor ligula cursus nulla, eget luctus sem tellus ultrices orci. Sed posuere egestas pretium. Fusce id arcu eu lectus suscipit malesuada et vel libero. Mauris nunc felis, auctor eu malesuada sed, elementum non felis. Praesent pellentesque suscipit commodo. Suspendisse commodo accumsan nisl ut consequat. Curabitur porta sapien a dolor facilisis in bibendum nibh rutrum. Nulla enim magna, dapibus sed auctor ac, pulvinar eu quam.</p>
</section>
</article>
<!-- end of article -->
<!-- start of aside -->
<aside>
<section class="related">
<h2>Related Headlines</h2>
<ul>
<li>That Guy Knocked Out the Other Guy</li>
<li>Your Favorite Sports Team Lost. Again.</li>
<li>The Yankees Buy the Entire League</li>
<li>Guy Says Something Stupid in the Heat of the Moment</li>
<li>New Record Set as Neither Team Scores</li>
<li>Why Haven't You Clicked One of Our Headlines Yet?</li>
</ul>
</section>
<section class="ad">
<img src="images/ad.png" alt="Boombox ad unit" />
</section>
<section class="article-tags">
<h2>Tagged</h2>
<ul class="tags">
<li>Football</li>
<li>Ball</li>
<li>Field</li>
<li>Upset</li>
<li>Sports</li>
<li>Winning</li>
</ul>
</section>
<section class="soundbites">
<h2>Sound Bites</h2>
<blockquote>
..this much is clear to me. If I were in his
shoes, I would have already won 5 Super Bowls.
<cite>-Guy with big ego</cite>
</blockquote>
<blockquote>
You play to win the game! Or at least, not to lose too badly.
<cite>—Easy going coach</cite>
</blockquote>
</section>
</aside>
<!-- end of aside -->
<!-- start of more-stories -->
<div class="more-stories">
<h2>More in Football</h2>
<ul class="slats">
<li class="group">
<a href="#">
<img src="images/ball.jpg" alt="Look, it's a ball" />
<h3>kicker connects on record 13 field goals</h3>
</a>
</li>
<li class="group">
<a href="#">
<img src="images/goal_post.jpg" alt="And now, a goal post!" />
<h3>Your favorite team loses to that team no one likes</h3>
</a>
</li>
<li class="group">
<a href="#">
<img src="images/ball_field.jpg" alt="This ball is laying a field!" />
<h3>The Scarecrows Win 42-0</h3>
</a>
</li>
</ul>
</div>
<!-- end of more-stories -->
</div>
<!-- end of container -->
</body>
</html>
Why is the nav width no longer 100% and it's color red gone and the headernow floats right beside it?
You are floating the elements within the nav but never clearing the floats:
add this rule to force clear the floated <li> elements
nav[role="navigation"] ul:after {
content : " ";
display: block;
height:0px;
clear:both;
float:none;
visibility: hidden;
}
Why do you have to clear floats? Read Here
One of the more bewildering things about working with floats is how
they can affect the element that contains them (their "parent"
element). If this parent element contained nothing but floated
elements, the height of it would literally collapse to nothing. This
isn't always obvious if the parent doesn't contain any visually
noticeable background, but it is important to be aware of.
nav[role="navigation"] li{
display: inline-block;
}
Firstly, apologies if there are any duplicates of the same sort of problem on here but i have read through a few and it hasn't resolved my problem.
Heres the code:
<div class="article-wrapper">
<div class="row">
<div class="small-12 large-7 columns">
<article>
<h2>What we do.</h2>
<div class="about-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu./p></div>
<h2>It's all about you.</h2>
<div class="about-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p></div>
<h2>In brief</h2>
<div class="about-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p>
</div>
</article>
</div>
</div>
<section>
<div class="row" id="serv-wrapper">
<div class="small-12 large-5 columns">
<h2 class="about-serv">Our Services</h2>
<ul class="about-list">
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</section>
</div>
CSS:
.article-wrapper {
padding: 1.5em 6.25%;
}
.about-text{
border-top-width: 100%;
border-top: 1px solid #e5e5e5;
}
.about-serv{
color:#00AED7;
}
ul.aboutlist {
list-style: none;
padding:0;
margin:0;
}
ul li.aboutlist {
padding-left: 1em;
text-indent: -.7em;
margin-top:1em;
}
ul li:before.aboutlist {
content: "º ";
color:#00AED7/* or whatever color you prefer */
}
section {
display: block;
background: #E8E8E8;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100% !important;
z-index: 0;
}
/* END ABOUT */
So what I would like to achieve is to have the OUR SERVICES section and everything inside it to have the same width as the container it is in with a background #E8E8E8.
Here is an image of what i'd like:
Thanks in advance.
Your HTML layout is fine but should be remove some CSS property. Because of you use more unnecessary CSS property.
Try this:
.article-wrapper {
width:875px;
margin:0 auto;
}
section {
background: #E8E8E8;
width: 100%;
}
.about-list > li {
list-style: none outside none;
}
Also if you want to responsive then try this like that: add this header area
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Also add this your main style css:
#media only screen and (min-width: 320px) and (max-width: 480px) {
.article-wrapper {
width:100%;
padding:0;
}
#serv-wrapper {
margin: 0 auto;
width: 90%;
}
}
You can do it by adding width:100% to .about-serv class.
.about-serv{
color:#00AED7;
width:100%;
}
In this html I basically have a sidebar-div and a page-div with the header, content and footer in it. I wanted the page-div to be in center, not the wrapper-div, therefore I added "left:-75px;" half the width of the sidebar-div for compensation. The only problem is when the browser-window get to small, bits of the sidebar go outside the screen.
What can I do to solve this problem? Here's my html. Thanks in advance!
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FRAME</title>
<style type="text/css">
<!--
html {
padding:0px;
margin:0px;
}
body {
background-color:#e1ddd9;
margin:0px;
padding:0px;
}
p {
margin:10px;
}
li {
list-style-type:none;
margin-left:-10px;
}
#wrapper {
position:relative;
width:1000px;
margin:0px auto;
padding:0px;
left:-75px;
}
#sidebar {
width:140px;
padding:0px;
float:left;
background-color:#ff99cc;
margin-top:130px;
margin-right: 10px;
}
#page {
width:850px;
padding:0px;
float:left;
overflow:auto;
}
#header {
height:100px;
background-color:#ff0;
margin-bottom:10px;
padding:10px;
}
#content {
background-color:#ffffff;
padding:10px;
}
#footer {
height:100px;
margin-top:10px;
background-color:#ff99cc;
padding:10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
</div>
<div id="page">
<div id="header"><p>This is the header</p></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare mauris vel nulla fermentum sed iaculis mi sollicitudin. Nullam tortor ante, suscipit eu rutrum nec, pharetra et turpis. Vestibulum a metus et massa porta tincidunt. Nam ac enim quam, vitae dictum tortor. Cras porttitor rutrum turpis, id scelerisque sem pharetra eget. Proin rhoncus tincidunt erat, a ornare nibh faucibus dictum. Nam leo dui, lacinia sed hendrerit in, tempus vitae libero. Nam non erat ac ante tempus adipiscing.</p>
<p>Nulla a sodales ipsum. Phasellus nec erat vitae enim laoreet sollicitudin. Morbi a egestas augue. Curabitur ac justo sit amet ipsum suscipit pulvinar eget vitae turpis. Sed iaculis arcu velit, sed vestibulum quam. Maecenas semper dolor ac leo laoreet sed vehicula libero scelerisque. In dui augue, faucibus id feugiat eu, vulputate id ante. Ut rutrum placerat orci, vitae lacinia lorem gravida et. Nullam semper eros lacus, sit amet tristique erat. Curabitur imperdiet lacus sit amet odio auctor congue. Sed ultricies erat et felis tincidunt pulvinar.</p>
<p>Cras enim ipsum, faucibus sed vulputate sit amet, dignissim non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rutrum accumsan nibh, pharetra pharetra sem luctus eget. Donec vel tincidunt enim. Nunc vel ligula massa, in varius ante. Cras laoreet dui volutpat libero ultricies hendrerit. Maecenas lectus orci, rhoncus at elementum id, lobortis in velit. Praesent elementum tincidunt dui, id porttitor urna sollicitudin eget. Nunc sed quam justo, et consectetur lectus. Suspendisse eleifend erat eget felis sollicitudin dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tincidunt, metus eu elementum venenatis, nibh purus pulvinar purus, eget convallis turpis risus a turpis. Praesent vel felis erat. Aenean elit nunc, dictum sit amet faucibus a, vehicula eget velit.</p>
</div>
<div id="footer"><p>This is the footer</p></div>
</div>
</div>
</body>
</html>
I have to admit I'm not sure what you're trying to do. With a 850px long main div, if you want it centered in a small resolution (like 800x600), it's clear to me you won't be able to show the side pane at all.
So it seems you can either have it centered or the side pane completely centered. Are you looking for a solution where the horizontal scroll would appear if the screen is too small ?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FRAME</title>
<style type="text/css">
<!--
html {
padding:0px;
margin:0px;
}
body {
background-color:#e1ddd9;
margin:0px;
padding:0px;
overflow: hidden;
}
p {
margin:10px;
}
li {
list-style-type:none;
margin-left:-10px;
}
#wrapper {
width: 1150px;
margin: auto;
padding: 0px;
}
#sidebar {
width:140px;
padding:0px;
float:left;
background-color:#ff99cc;
margin-top:130px;
margin-right: 10px;
}
#page {
width:850px;
padding:0px;
float:left;
overflow:auto;
}
#fakebar {
width: 140px;
float: left;
}
#header {
height:100px;
background-color:#ff0;
margin-bottom:10px;
padding:10px;
}
#content {
background-color:#ffffff;
padding:10px;
}
#footer {
height:100px;
margin-top:10px;
background-color:#ff99cc;
padding:10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
</div>
<div id="page">
<div id="header"><p>This is the header</p></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare mauris vel nulla fermentum sed iaculis mi sollicitudin. Nullam tortor ante, suscipit eu rutrum nec, pharetra et turpis. Vestibulum a metus et massa porta tincidunt. Nam ac enim quam, vitae dictum tortor. Cras porttitor rutrum turpis, id scelerisque sem pharetra eget. Proin rhoncus tincidunt erat, a ornare nibh faucibus dictum. Nam leo dui, lacinia sed hendrerit in, tempus vitae libero. Nam non erat ac ante tempus adipiscing.</p>
<p>Nulla a sodales ipsum. Phasellus nec erat vitae enim laoreet sollicitudin. Morbi a egestas augue. Curabitur ac justo sit amet ipsum suscipit pulvinar eget vitae turpis. Sed iaculis arcu velit, sed vestibulum quam. Maecenas semper dolor ac leo laoreet sed vehicula libero scelerisque. In dui augue, faucibus id feugiat eu, vulputate id ante. Ut rutrum placerat orci, vitae lacinia lorem gravida et. Nullam semper eros lacus, sit amet tristique erat. Curabitur imperdiet lacus sit amet odio auctor congue. Sed ultricies erat et felis tincidunt pulvinar.</p>
<p>Cras enim ipsum, faucibus sed vulputate sit amet, dignissim non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rutrum accumsan nibh, pharetra pharetra sem luctus eget. Donec vel tincidunt enim. Nunc vel ligula massa, in varius ante. Cras laoreet dui volutpat libero ultricies hendrerit. Maecenas lectus orci, rhoncus at elementum id, lobortis in velit. Praesent elementum tincidunt dui, id porttitor urna sollicitudin eget. Nunc sed quam justo, et consectetur lectus. Suspendisse eleifend erat eget felis sollicitudin dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tincidunt, metus eu elementum venenatis, nibh purus pulvinar purus, eget convallis turpis risus a turpis. Praesent vel felis erat. Aenean elit nunc, dictum sit amet faucibus a, vehicula eget velit.</p>
</div>
<div id="footer"><p>This is the footer</p></div>
</div>
<div id="fakebar"></div>
</div>
</body>
</html>
I am new to the world of coding as well as CSS and am attempting to create a page that has 2 columns and multiple rows akin to a table however am unsure if this is the correct way to achieve the result.
NOTES
I am using an internal stylesheet before I copy it across to an external stylesheet.
I have simply named the columns leftnav and leftnav1 and content and content1. I know these names are not ideal however I am trying to ascertain the best way to code the page rather than worry about naming conventions at the moment.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#backdrop {
background-color: #000000;
width: 100%;
height: 10px;
}
#wrapper {
/* background-color: gray; */
width: 960px;
margin: 0px auto;
margin-top: 100px;
}
#logo {
float: left;
background-color: #E0EEEE;
margin-bottom: 10px;
}
#topnav {
float: right;
margin-right: 180px;
margin-bottom: 10px;
/* background-color: #C1CDCD; */
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#innerwrapper {
clear: both;
width: 800px;
margin: 0px auto;
}
#header {
background-color: #000000;
width: 700px;
height: 200px;
}
#innerhead {
color: #ffffff;
padding: 50px;
}
#leftnav {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
#leftnav1 {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content1 {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
</style>
</head>
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div id="leftnav">About</div>
<div id="content">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="leftnav1">About</div>
<div id="content1">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
</html>
For dividing your page up into columns, you'd be best to invest some time learning grid CSS frameworks such as 960, Blueprint or OOCSS.
Once you have your page (or parts of your page, if desired) divided up into the required number of columns, you can divide each column up into either fixed-height or variable-height rows.
While it's noble that you want to work this out yourself, I would suggest that as you are "new to the world of coding", you might actually benefit more from looking at existing examples and solutions to this known design problem and adopting a best-practice approach from the outset.
EDIT
Ok, so given we're sticking with what we've got, let's look at a way to clean the styles up.
You're declaring the exact same styles in two places: Leftnav and Leftnav1 would be better changed to:
.leftnav { float: left; margin-top: 10px; width: 200px; }
You can then apply that class to both left nav containers. The same goes for your content and content1 styles.
To answer your original question, "is this the correct way to do it", I would say, "strictly speaking, no it's not. But it is one way to do it.
A better approach might be to use the following:
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
Your three required styles then become:
.leftCol { float: left; }
.col300 { width: 300px; }
.main { overflow: hidden; }