I have this responsive layout on my site. When the screen is less than 767px wide the image is tucked under the text. Is there a way to make the image (and caption i.e. .rightColumn) go above the .leftColumn instead?
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; }
.columnsContainer { position: relative; margin: 1.5em 0; padding:1.5em ; border: 1px solid #fff;}
.leftColumn { margin-bottom: .5em; }
.rightColumn .wp-caption{border-width: 0px;}
.rightColumn {min-height:100%;}
/* MEDIA QUERIES */
#media screen and (min-width: 767px ) {
.leftColumn { margin-right: 51%; }
.rightColumn { position: absolute; top: 0; right: 0; width: 48.5%; }
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Responsive Two Column Layout (Left Column Fluid)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="columnsContainer">
<div class="leftColumn">
<h2 style="width: 100%; font-family: Aller;"></h2>
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND
FISHING BREAK</h2>
<ul class="checkmark">
<li>2 Days each of guided salmon, pike & trout/grayling fishing</li>
<li>7 Night bed & breakfast</li>
<li>Full equipment & transfers provided</li>
<li>Peak season 1st April - 15th November</li>
<li>Glasgow or Edinburgh airport transfers Included</li>
<li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow & Perth</span></li>
</ul>
View Trip Dossier
</div>
<div class="rightColumn">
<p style="text-align: right;">
<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" />
<br>Experience the best of Scotland's fishing with this six day break!
</p>
</div>
</div>
</body>
</html>
Easiest way to do this is to add the rightColumn div before the leftColumn div. It should not mess the structure up and will show the image first
<div class="rightColumn">
<p style="text-align: right;">
<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" />
<br>Experience the best of Scotland's fishing with this six day break!
</p>
</div>
<div class="leftColumn">
<h2 style="width: 100%; font-family: Aller;"></h2>
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND
FISHING BREAK</h2>
<ul class="checkmark">
<li>2 Days each of guided salmon, pike & trout/grayling fishing</li>
<li>7 Night bed & breakfast</li>
<li>Full equipment & transfers provided</li>
<li>Peak season 1st April - 15th November</li>
<li>Glasgow or Edinburgh airport transfers Included</li>
<li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow & Perth</span></li>
</ul>
View Trip Dossier
</div>
Use bootstrap and use flex-reverse-column this should work
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./assests/style.css">
<title>Hello, world!</title>
</head>
<body>
<h1>HELLO BOOTSTRAP</h1>
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-12 col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at laoreet tortor,
vitae sodales magna. Curabitur vel feugiat magna, vitae vehicula nibh. Proin
eget lobortis mi. Sed dapibus urna quis risus fringilla ultrices. Praesent lacinia
fermentum velit, vitae ultricies nibh porttitor quis. Aenean nisi mi, elementum id
quam eu, tristique porta nunc. Vestibulum ac faucibus lorem. Donec sit amet metus
venenatis nisi tincidunt ultrices. In semper nibh nunc, at posuere purus rhoncus
ac. Mauris pulvinar sed mauris quis efficitur. Proin sollicitudin euismod purus,
a gravida neque cursus sed. Etiam faucibus aliquet metus, ut accumsan augue
suscipit nec. Donec laoreet nisi nibh, ac egestas nisl hendrerit sit amet.
Morbi scelerisque, velit quis suscipit viverra, sem velit varius nulla, vitae
tincidunt felis elit sit ametdolor. Nulla mi tellus, imperdiet nec nisi non,
suscipit suscipit lacus. Nunc porttitor nibh at purus dignissim mollis.
</p>
<p>
Phasellus sodales tempor turpis, a vehicula sem. Donec et leo in lorem venenatis
interdum at non risus. Maecenas aliquam, turpis at posuere tristique, nunc
nibh maximus nisl, a tristique lacus turpis a ligula. Proin gravida
id odio eget facilisis. Phasellus varius quis arcu in lobortis. Vivamus eu condimentum velit.
Praesent massa purus, iaculis eget consectetur sed, dictum in turpis.
Mauris quis tempus massa. Sed quam justo, viverra id
ligula sit amet, aliquet vehicula tortor.
</p>
</div>
<div class="col-sm-12 col-md-6">
<img src="https://picsum.photos/536/354" style="width: 100%; height: 100%;" alt="unsplash">
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>```
Related
my page must be like this: https://ibb.co/Z1tZGs3
for now i have created that header strip and footer strip but how can I make central page info like praesent and lorem ipsum someone can help me pls? maybe I have to add a navbar between header and footer but i don't know how to do that and how can i cut footer strip like right side i want to cut some width.
body{
background-color: #ffff;
padding:0;
margin:0;
font-family: harmy;
}
header{
background-color: #9cd5e8;
margin-bottom: -10px;
color:#838478
}
header.cut{
margin-right:50px;
}
h1.light{
font-weight: lighter;
}
.cut{
margin-left:10px;
margin-right:10px;
}
.footer{
background-color: #7fbec0;
position: fixed;
left: 0;
bottom: 0;
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<title>ORIZZONTE VIAGGI</title>
<style>
#font-face {
font-family: harmy;
src: url('./font.woff');
}
</style>
</head>
<body>
<div class="cut">
<header>
<h1 class="light"> Orizzonte Viaggi</h1>
</header>
<img src="img/beach.jpg" alt="" width="1515" height="420"/>
</div>
<div class="cut">
<div class="footer">
<p>
© 2020 <u>Harman</u>
</p>
</div>
</div>
</body>
</html>
This is my proposal based on your model
body{
background-color: #ffff;
padding:0;
margin:0;
font-family: harmy;
}
#bodyCenter{
margin-left:25px;
margin-right:25px;
}
header{
background-color: #9cd5e8;
margin-bottom: -10px;
color:#838478;
margin-right:40px;
}
h1.light{
font-weight: lighter;
}
#bigPicture{
width:100%; /*will take 100% from bodyCenter available width*/
}
footer{
background-color: #7fbec0;
/*position: fixed;
left: 0;
bottom: 0;*/
display: flex;
justify-content: center;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<title>ORIZZONTE VIAGGI</title>
<style>
#font-face {
font-family: harmy;
src: url('./font.woff');
}
</style>
</head>
<body>
<div id="bodyCenter">
<header>
<h1 class="light"> Orizzonte Viaggi</h1>
</header>
<img src="https://s2.qwant.com/thumbr/474x325/d/e/3357a239e6aeeb0497d846500eaf15f26a80324945abb2de8bdaef07e06823/th.jpg?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.UKfu8ufBwKPECTmhud4_cQHaFF%26pid%3DApi&q=0&b=1&p=0&a=0" id="bigPicture">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nibh id leo aliquet porta. Etiam euismod pretium mi vitae pretium. Cras eu nibh molestie, venenatis mauris vitae, auctor elit. Fusce fermentum sed ante vel fringilla. Maecenas auctor nec quam nec rutrum. Quisque eu pharetra tortor. Integer nec purus convallis, interdum urna et, tempor tortor. Morbi tristique hendrerit libero quis fermentum. Praesent fringilla fermentum nisl. Integer faucibus sit amet lacus vitae tincidunt. Pellentesque convallis augue eget ligula consectetur tincidunt. Sed cursus volutpat lorem, non rhoncus urna placerat et.
In rutrum gravida sodales. Integer commodo mi quam, et luctus arcu porta sit amet. Suspendisse potenti. Nullam sed lobortis ex. Phasellus commodo ornare velit, quis viverra nulla rhoncus ac. Nulla facilisi. Praesent congue felis eu orci fringilla consequat. In vitae finibus lorem. Aliquam convallis molestie lectus, quis sagittis mauris accumsan et. Sed luctus, turpis vel mattis vehicula, tellus ligula ornare urna, non mattis dolor elit eu lacus.
</div>
<footer>
<p>© 2020 <u>Harman</u></p>
</footer>
</div>
</body>
</html>
enter image description hereI am using materialize framework for building my first basic site, however on mobile only view, the margins are quite wide and i'd like them to take up full screen, so as to make reading better and make the middle card stretch less.
I have also attached a picture now, as you can see the padding and margins are quite wide.
https://codepen.io/jehc10/pen/LKqRRQ
.brand-logo {
margin-left: 20px;
}
.card {
margin-top: 15px;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
font-family: 'ABeeZee', sans-serif;
background: #fad1df;
}
main {
flex: 1 0 auto;
}
.custom {
margin-right: 100px;
margin-left: 100px;
}
.pagination {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
}
table {
width: 600px;
margin: auto;
border: 2px solid #f1749e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My materialize website</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="materialize.css">
<link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<main>
<nav>
<div class="nav-wrapper pink lighten-3">
Website
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<!-- Cards -->
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 1</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 2</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
</div>
<!-- Middle card -->
<div class="mobile-margin visible-xs">
<div class="lg12">
<div class="card custom light-blue lighten-5">
<div class="card-content black-text">
<span class="card-title">Example 1</span>
<p>
Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id
risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt
sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget,
consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum
semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium.
In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper
suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue.
Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis
ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque
vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna.
</p>
</div>
</div>
</div>
<!-- Table -->
<table class="responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
<!-- Hover button -->
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!-- Pagination -->
<ul class="pagination">
<li class="disabled"><i class="material-icons">chevron_left</i></li>
<li class="active">1</li>
<li class="waves-effect">2</li>
<li class="waves-effect">3</li>
<li class="waves-effect">4</li>
<li class="waves-effect">5</li>
<li class="waves-effect"><i class="material-icons">chevron_right</i></li>
</ul>
</main>
<!-- Footer -->
<footer class="page-footer pink lighten-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Jesse
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
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
I have been designing a responsive website and i have come across this issue.
Firstly, changing from portrait mode to landscape didn't trigger any responsive reactions. It just zoomed into the website. I ensured this doesn't happen with:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
However, when the user change back to portrait mode, a white space appears on the right. Here is a screenshot.
Here is part of the code of the container.
<div class="about">
<div class="container">
<div class="row">
<div class="span12">
<div class="headlines"><h1>Hello..</h1></div>
<div class="row">
<div class="span6">
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
<div class="span6">
<p>
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>
<hr class="soften"/>
<div class="about-hire">
<h3 >Hello?</h3>Let's talk!
</div>
</div>
</div>
</div>
</div>
and this is the corresponding CSS.
.about {
text-align: center;
padding: 100px 0 100px 0;
background-color: #fff;
}
.about .container {
position: relative;
z-index: 9;
}
#media (max-width: 767px) {
.about {
margin-left: -20px;
margin-right: -20px;
}
.about .container {
margin-left: 20px;
margin-right: 20px;
}
}
Any help is greatly appreciated.
I can think of 2 things here:
1.
the scale should be this:
<meta name="viewport" content="width=device-width, initial-scale=1">
2.
Could be your dimensions states...
Add this on your body tag if you don't have it... in your master css:
body {min-width: 100%;}
If you want to be specific you can start with this:
body {min-width: 1024px;}
then add your media code appropiately as desire. Example:
#media only screen and ( max-width: 640px) {blah}
:)
I am new to the world of coding as well as CSS. I have put together a page however am unsure if I may have overused the div tag and if it would affect the performance of the page as well as if I should be clearing the float as its own div tag e.g.
#content {
clear: both;
}
I have included the entire code below
<!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>
Don't worry about performance due to many divs. Unless you use hundreds of divs (e.g. to simulate rounded borders on some browsers), the bottleneck for webpage is and will be the inet connection.
Not at all.
That is, relatively, a small amount of divs.
Browser rendering performance is extremely impressive these days, so the major bottleneck will be the speed of the Internet connection downloading the page.
The smaller you can make your page the faster it will download and render.