<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></head>scipt?
<![endif]-->
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<style>
#container{
margin: auto;
width: 800px;
padding-top: 50px;
}
#menu ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
position: fixed;
background-color: blue;
top:0;
left:0;
right:0;
margin:0;
overflow:hidden;
}
#menu a
{
float:left;
text-decoration:none;
color:black;
padding:0.2em 0.6em;
border-right:1px solid white;
}
#menu a:hover {color: blue;}
#menu li a {display:inline;}
</style>
<div id="menu">
<ul>
<li>Home</li><br>
<li>Categories</li><br>
<li>Admin Panel</li><br>
<li>Log Out</li><br>
</ul>
</div>
<h2></h2>
<div id="container">
<body>
<div id="header">
<h1> Welcome To My Own Personal Blog</h1>
</div>
<article>
<hr />
<h4><div id="date">10th<br>Oct</div></h4>
<h2>My Seventh Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=7'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">2nd<br>Oct</div></h4>
<h2>My Sixth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=6'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">01st<br>Oct</div></h4>
<h2>My Fifth Post! </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=5'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">18th<br>Sept</div></h4>
<h2>My Forth Post!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=4'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">14th<br>Sept</div></h4>
<h2>My Third Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=3'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">12th<br>Sept</div></h4>
<h2>My Second Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=2'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<a href='index.php?p=2'>Next</a></div>
</body>
</html>
I can't stop the menu from producing a staircase affect. The menu in a separate file works correctly.
Im thinking that something else is triggering it to do this. Thank you for your help. The idea is that the menu will look similar to the Facebook menu and be fixed to the top of the screen.
UPDATE
Fiddle of OP's code
The issue seems to result from erroneous <li style="list-style: none"><br></li> items between each <li>
Updated fiddle
Related
I am HTML programming newbie so I apologies if this question is too elementary.
I want to wrap the contents of an article around the table of contents. Here is my HTML web-page. That is I would like the table of contents to be on the left, and the article itself directly to start to the right of it. If possible, I would like to do this in a separate CSS file.
<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en" xml:lang="en">
<head>
<title>How to Win Friends and Influence People</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="content">
<h1 class="title">How to Win Friends and Influence People</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li>1. Introduction</li>
<li>2. Section 2
<ul>
<li>2.1. Subsection 3</li>
</ul>
</li>
<li>3. Section 4</li>
</ul>
</div>
</div>
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
<div class="figure">
<p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
</div>
</body>
</html>
You should try using css Flexbox or css floats.
HTML:
<div class="container">
<div class="table-contents">
<h3>
Table of Contents
</h3>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.</p>
</div>
</div>
CSS:
.container{
display: flex;
}
.table-contents, .content{
padding: 10px;
}
.table-contents{
flex: 1 0 auto;
width: 150px;
}
Here is a fiddle: http://jsfiddle.net/wkszuvLm/1/
Hope this helps.
body tag is already there wrapping around everything, you could use it as well as adding another div inside body to wrap everything else.
There are multiple ways to place elements within a container. Learn about using css display property set to grid or flex. Both come with their own subset of properties.
use link tag to use an external css file.
<link rel="stylesheet" type="text/css" href="css_file_url_here">
You can do it by putting those in two different div and then style them as required.
.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
You can put the above in css file and call in your <head> tag or you can also use it as below:
<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en" xml:lang="en">
<head>
<title>How to Win Friends and Influence People</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
</style>
</head>
<body>
<div id="content">
<div class="divLeft">
<h1 class="title">How to Win Friends and Influence People</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li>1. Introduction</li>
<li>2. Section 2
<ul>
<li>2.1. Subsection 3</li>
</ul>
</li>
<li>3. Section 4</li>
</ul>
</div>
</div>
</div>
<div class="divRight">
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
<div class="figure">
<p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
</div>
</div>
</body>
</html>
I am trying to create something like image on left and content on right and alternate order. As you can see my picture below the second one of the image is not on the right side. And is not responsive on smaller screen size. Please help!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<title>Example</title>
<style>
body {
margin-top: 50px;
}
.img-1 {
height: 250px;
width: 350px;
margin: 10px 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6" >
<img class="img-1" src="img-1.jpg">
</div>
<div class="col-md-4 col-sm-4">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6" >
<img class="img-1" src="img-1.jpg">
</div>
<div class="col-md-4 col-sm-4">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
And this is not responsive on smaller screen size, How can I fix it?
Your help much appriciate!
To switch the order so the picture is on the right, in your second row the first div with the class="col-md-6 col-sm-6" should have the h3 and p in it, and then the second div in that row with class="col-md-4 col-sm-4" should have the img in it. To make the images responsive, add the "img-responsive" class in the img tags, and make the height and width you defined in the CSS a max-height or max-width so the images can scale down to a smaller height/width to fit in smaller screens.
Use can use .col-sm-push-* and .col-sm-pull-* to switch the ordering of grid columns. Here is reference:http://getbootstrap.com/css/#grid-column-ordering.
To make the images responsive, add the "img-responsive" class in the img tags.
.img-1{
margin-bottom:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6" >
<img class="img-1 img-responsive" src="https://pioneerwoman.files.wordpress.com/2010/11/springy-flower-pot-desserts1.jpg">
</div>
<div class="col-sm-4">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-push-4" >
<img class="img-1 img-responsive" src="http://www.blog.designsquish.com/images/uploads/jason-whatever-flower-pots.jpg">
</div>
<div class="col-sm-4 col-sm-pull-6">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
See if this helps.
Please click the link to see how it works. https://jsfiddle.net/2d7vab0t/
HTML:
<img class="img-1" src="img-1.jpg" width="350px" height="250px">
<div id="container">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div id="container2">
<img class="img-1" src="img-1.jpg" width="350px" height="250px">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
CSS:
body {
margin-top: 50px;
}
.img-1 {
border: 1px solid black;
max-width: 50%;
margin: 10px 50px;
}
#media only screen and (min-width:768px) {
img {float: left;}
#container2 {clear: left;}
}
Hi I am trying to show my background image for the div called #container but it is not working why?
When I try to set the background color it works perfectly... I have tried to use
'/pics/coffey.jpg'
pics/coffey.jpg
"/pics/coffey.jpg"
"../pics/coffey.jpg"
But the picture is lying like this /css/pics/coffey.jpg
And my style file is in the css folder so it should work with /pics/coffey.jpg but it doesn't anyone help??
CSS:
#container {
width : 740px;
height:200px;
margin-left : auto;
margin-right : auto;
margin-top : 20px;
line-height: 1.7em;
background-repeat:no-repeat;
background-image: url("/pics/coffey.jpg");
}
#topbar {
height:20px;
width:740px;
float:right;
font-size:10px;
font-family:Verdana;
font-style:italic;
padding:0px;
background:#644C37;
}
HTML
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Lorem Ipsum</title>
<link rel="stylesheet" href="css/basic.css" />
</head>
<body>
<div id="container">
<div id="topbar">
"Quisque sit amet justo"
</div>
<div id="menu">
Skip navigation
<ul>
<li class="active">hem</li>
<li>projekt</li>
<li>information</li>
<li>kontakt</li>
<li>hitta till oss</li>
</ul>
</div>
<div id="content">
<div id="maincontent">
<h1>Lorem Ipsum</h1>
<img src="pics/info.jpg" alt="Bubblande kaffe" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tincidunt volutpat nunc. Curabitur id dolor sed massa volutpat mollis. Duis lorem diam, vestibulum pharetra, consequat ac, semper ac, nibh. Integer vel pede ac purus aliquet nonummy. In hendrerit. Praesent posuere, tellus eget nonummy pellentesque, tellus eros bibendum erat, non hendrerit erat eros sed lorem. Sed pretium quam sed lacus. Maecenas turpis tellus, feugiat a, ultrices a, porta ac, nisi. Donec convallis neque. Nam lobortis nibh sit amet metus tincidunt faucibus. Sed nec leo. Aliquam mattis.</p>
</div>
<div id="subcontent">
<h1>Quisque</h1>
<p>Quisque sit amet justo. Maecenas eu nibh ut est tincidunt congue. Vivamus quis diam. Curabitur lobortis pede eu turpis. Nulla adipiscing. Phasellus risus arcu, malesuada eu, molestie et, cursus vel, nisl. Aliquam at est. Nullam nec lacus. Nulla vitae justo. Donec volutpat elit ut orci.</p>
<h2>Read more:</h2>
<ul>
<li>http://www.saadsa.fds</li>
<li>http://www.llsd.seafa/seas</li>
<li>http://consecyt.hg</li>
</ul>
</div>
<div id="bottomcontent">© Linnéuniversitetet, Institutionen för datavetenskap</div>
</div>
</div>
</body>
</html>
/css/pics/coffey.jpg
is the correct path
While trying to create a div 'ed structure I am having difficulty on covering a background color.
in the example below the wrap div is not covering other layers.
There is something I am missing in the css but cannot figure out what is the problem :(
Any help would be great :)
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: Arial;
}
html {
height: 100%;
}
body {
background: #688420;
height: 100%;
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
#column {
position: relative;
width: 950px;
margin: auto;
}
#wrap {
background-color:#FF0;
}
.wrapleft {
background-color: #039;
text-align: left;
float:left;
width:60%;
}
.wrapright {
background-color:#3F9;
text-align:left;
float:left;
width: 35%;
}
.seperator {
width:5%;
background-color:#9CC;
float:left;
}
.space {
width:100%;
height:20px;
clear:both;
}
#wrapContent {
background-color: #C3F;
}
</style>
</head>
<body>
<div id="main">
<div id="column">
<div id="wrapContent">
<div id="wrap">
<div class="space"> </div>
<div class="wrapleft">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div><!-- wrapleft -->
<div class="seperator"> </div>
<div class="wrapright">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div> <!-- wrapright -->
<div class="space"> </div>
<div class="wrapleft">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div><!-- wrapleft -->
<div class="seperator"> </div>
<div class="wrapright">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div> <!-- wrapright -->
</div><!-- wrap -->
</div> <!-- column -->
</div> <!-- main -->
</body>
</html>
You have to clear your floats:
#wrap {
background-color:#FF0;
overflow: hidden;
}
My image says it all.
At #1 screenshot is how it is right now
At #2 is how I want it to be
How can i do this?
Here's my current html:
<div>
<span style='float: left; margin: 10px; width: 60px; display: block;'>
<img style='border: 1px solid #FFF; width: 61px; height: 80px;' src='images/profilePhoto/thumbs/104.jpg'>
<br>Rafo O.
</span>
<h1>(inget ämne)</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla urna eget urna euismod aliquet. Duis porta volutpat blandit. Phasellus bibendum bibendum porta. Nunc molestie tristique leo, sed euismod orci ultricies vitae. Mauris non libero a leo ultricies laoreet. Suspendisse luctus urna vel sapien tristique vitae semper nulla eleifend. Integer congue aliquam pharetra. Phasellus diam neque, tincidunt vel elementum vel, ornare sit amet mi. Nulla tincidunt purus in odio vulputate mollis. Nunc urna odio, rutrum eu ultricies a, facilisis ullamcorper nunc. In purus velit, varius vel laoreet eu, tincidunt non purus. Nulla facilisi. Sed ac lectus nibh. Praesent non velit nibh.<br />
........
</div>
<p style='float: right; color: grey; font-weight: bold;'>1-11-2010 kl. 13:28</p></div>
<div class='clearfloat'></div>
Add a margin to the left of the text:
<div style="margin-left:100px;">
<h1>(inget ämne)</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]
</div>
</div>
You should consider unobstrusive CSS and move your styles out of your markup (use external files).