Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS layout questions 1

Status
Not open for further replies.
FesterSXS

FesterSXS

Programmer
Feb 4, 2002
2,196
GB
In the past I have written plenty of sites using tables for layout. I now wish to move on and use CSS instead. I am having a little difficulty though.

I have a site I am writing for a friend - I have uploaded it temporarily to
In IE, most of the pages are displaying a horizontal scrollbar and I don't see why.

In FF the content is wrapping below the lefthand menu.

I also intend to make the orange bars on the left and right fill the available height of the page but I will leave that for now.

Tony
[red]_________________________________________________________________[/red]
Webmaster -
 
Sort by date Sort by votes
Fester,

What about something along these lines?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">

<head>
  <title>Sun Villa - Welcome to Sun Villa</title>
  
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="some text here" />
  <meta name="keywords" content="Disney, Florida, villa, Calabay Parc, Calabay Park, pool, golf, beaches, shopping" />
  
<style type="text/css">

#nav {
    float: left;
    width: 150px;
}

#content {
    padding: 0 150px;
}

#rightinfo {
    float: right;
    width: 150px;
}

</style>

</head>

<body>
  
<div id="title"><h1>Welcome to Sun Villa</h1></div>

<div id="rightbar"></div>

<div id="container">
    <div id="header"></div>
  
    <div id="nav">
        <div id="menu">
            filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler 
        </div>
    
        <div id="menuaddon1"></div>
        <div id="menuaddon2"></div>
        <div id="menuaddon3"></div>
        
        <div id="contacts"></div>
    </div>
    
    <div id="rightinfo">more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler </div>
  
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean rutrum rhoncus sem. Nulla congue tellus nec tellus. Aenean et velit. Curabitur mattis, orci ut blandit fringilla, augue tellus vehicula felis, vel dapibus turpis sem fermentum magna. Aliquam sit amet nibh non dui consequat semper. Aliquam erat volutpat. Aliquam auctor semper dolor. Mauris at quam. Aliquam ante wisi, facilisis ac, mollis at, tincidunt volutpat, justo. Etiam laoreet, enim non luctus feugiat, ipsum tellus adipiscing velit, ac ornare turpis turpis eu nulla. Quisque leo nibh, convallis a, dapibus id, consequat eu, ligula. Praesent felis quam, porta a, sodales sed, accumsan sed, neque. Proin semper auctor risus. Suspendisse aliquet, tortor vitae sagittis tincidunt, erat lectus volutpat arcu, sit amet imperdiet ante metus at risus. Mauris nibh felis, vestibulum pretium, tempus nec, lobortis ac, justo. Integer commodo eros ut ante.</p>
        <p>Donec lobortis ultricies odio. Nunc nulla lectus, iaculis vitae, interdum eget, molestie in, felis. Nullam sed mi. Praesent vel mauris ut felis fermentum tristique. Curabitur ipsum magna, porttitor in, faucibus vel, accumsan et, purus. Sed vestibulum felis ut diam. Vivamus gravida tincidunt tortor. Curabitur dictum libero at magna. Aenean vel tortor eu quam rhoncus gravida. Sed eu ante vitae elit porttitor luctus.</p>
        <p>Vestibulum euismod egestas lacus. Quisque et eros. Suspendisse lobortis sagittis tortor. Nam tempus dignissim quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum mauris augue, tempus eget, hendrerit a, elementum eu, sem. Quisque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean viverra. Mauris euismod. Cras interdum massa nec nulla. Vivamus at tellus dignissim velit dignissim accumsan. Praesent feugiat, leo et faucibus scelerisque, wisi augue feugiat nisl, eget laoreet pede augue non diam. Nullam et sem. Aenean commodo, justo ut luctus venenatis, nibh neque nonummy ipsum, non viverra mi mauris nec lacus.</p>
        <p>Aenean ultricies. In eu turpis in risus aliquam imperdiet. Donec diam dolor, fermentum eget, consectetuer in, tincidunt quis, augue. Maecenas blandit, risus non fermentum tempus, risus ipsum tempus nisl, a laoreet metus eros eu diam. Fusce vitae nibh. Vestibulum ultrices ullamcorper augue. Integer ac nulla non sem volutpat mollis. Nullam tincidunt mi nec odio porttitor varius. Aliquam tincidunt sodales sapien. Integer nec felis eu ipsum convallis volutpat. Aliquam in libero non tellus malesuada tristique. Nullam pretium, lectus sed venenatis scelerisque, wisi tortor nonummy ligula, sit amet dignissim dui lacus bibendum ligula. Mauris ut nulla. In semper orci in pede. Donec ornare ligula id metus. Donec tempor. Aliquam ut risus. Praesent dictum turpis non lacus. Nullam eu ante sit amet purus elementum adipiscing. Curabitur felis ligula, auctor quis, sagittis in, malesuada vel, sapien.</p>
        <p>Mauris dolor orci, semper eu, lacinia et, volutpat quis, lectus. Maecenas placerat interdum eros. Cras tortor mauris, cursus vitae, convallis eget, molestie in, quam. Sed adipiscing, felis eu dictum suscipit, erat lorem aliquet justo, sed mattis nibh purus et arcu. Ut placerat fermentum magna. Aenean placerat lacus eget leo. Nam a erat. Nulla non mauris. Curabitur facilisis. Vivamus condimentum iaculis massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu mauris vitae ipsum aliquam consectetuer. Nullam sollicitudin. Aenean ultrices ligula sed ipsum. Integer vehicula tristique neque.</p>
    </div>
  
    <div id="footer"></div>
</div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">

<head>
  <title>Sun Villa - Welcome to Sun Villa</title>
  
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="some text here" />
  <meta name="keywords" content="Disney, Florida, villa, Calabay Parc, Calabay Park, pool, golf, beaches, shopping" />
  
<style type="text/css">

#nav {
    float: left;
    width: 150px;
}

#content {
    padding-left: 150px;
}

#rightinfo {
    float: right;
    width: 150px;
}

</style>

</head>

<body>
  
<div id="title"><h1>Welcome to Sun Villa</h1></div>

<div id="rightbar"></div>

<div id="container">
    <div id="header"></div>
  
    <div id="nav">
        <div id="menu">
            filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler 
        </div>
    
        <div id="menuaddon1"></div>
        <div id="menuaddon2"></div>
        <div id="menuaddon3"></div>
        
        <div id="contacts"></div>
    </div>
    
    <div id="content">
        <div id="rightinfo">more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler more filler </div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean rutrum rhoncus sem. Nulla congue tellus nec tellus. Aenean et velit. Curabitur mattis, orci ut blandit fringilla, augue tellus vehicula felis, vel dapibus turpis sem fermentum magna. Aliquam sit amet nibh non dui consequat semper. Aliquam erat volutpat. Aliquam auctor semper dolor. Mauris at quam. Aliquam ante wisi, facilisis ac, mollis at, tincidunt volutpat, justo. Etiam laoreet, enim non luctus feugiat, ipsum tellus adipiscing velit, ac ornare turpis turpis eu nulla. Quisque leo nibh, convallis a, dapibus id, consequat eu, ligula. Praesent felis quam, porta a, sodales sed, accumsan sed, neque. Proin semper auctor risus. Suspendisse aliquet, tortor vitae sagittis tincidunt, erat lectus volutpat arcu, sit amet imperdiet ante metus at risus. Mauris nibh felis, vestibulum pretium, tempus nec, lobortis ac, justo. Integer commodo eros ut ante.</p>
        <p>Donec lobortis ultricies odio. Nunc nulla lectus, iaculis vitae, interdum eget, molestie in, felis. Nullam sed mi. Praesent vel mauris ut felis fermentum tristique. Curabitur ipsum magna, porttitor in, faucibus vel, accumsan et, purus. Sed vestibulum felis ut diam. Vivamus gravida tincidunt tortor. Curabitur dictum libero at magna. Aenean vel tortor eu quam rhoncus gravida. Sed eu ante vitae elit porttitor luctus.</p>
        <p>Vestibulum euismod egestas lacus. Quisque et eros. Suspendisse lobortis sagittis tortor. Nam tempus dignissim quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum mauris augue, tempus eget, hendrerit a, elementum eu, sem. Quisque rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean viverra. Mauris euismod. Cras interdum massa nec nulla. Vivamus at tellus dignissim velit dignissim accumsan. Praesent feugiat, leo et faucibus scelerisque, wisi augue feugiat nisl, eget laoreet pede augue non diam. Nullam et sem. Aenean commodo, justo ut luctus venenatis, nibh neque nonummy ipsum, non viverra mi mauris nec lacus.</p>
        <p>Aenean ultricies. In eu turpis in risus aliquam imperdiet. Donec diam dolor, fermentum eget, consectetuer in, tincidunt quis, augue. Maecenas blandit, risus non fermentum tempus, risus ipsum tempus nisl, a laoreet metus eros eu diam. Fusce vitae nibh. Vestibulum ultrices ullamcorper augue. Integer ac nulla non sem volutpat mollis. Nullam tincidunt mi nec odio porttitor varius. Aliquam tincidunt sodales sapien. Integer nec felis eu ipsum convallis volutpat. Aliquam in libero non tellus malesuada tristique. Nullam pretium, lectus sed venenatis scelerisque, wisi tortor nonummy ligula, sit amet dignissim dui lacus bibendum ligula. Mauris ut nulla. In semper orci in pede. Donec ornare ligula id metus. Donec tempor. Aliquam ut risus. Praesent dictum turpis non lacus. Nullam eu ante sit amet purus elementum adipiscing. Curabitur felis ligula, auctor quis, sagittis in, malesuada vel, sapien.</p>
        <p>Mauris dolor orci, semper eu, lacinia et, volutpat quis, lectus. Maecenas placerat interdum eros. Cras tortor mauris, cursus vitae, convallis eget, molestie in, quam. Sed adipiscing, felis eu dictum suscipit, erat lorem aliquet justo, sed mattis nibh purus et arcu. Ut placerat fermentum magna. Aenean placerat lacus eget leo. Nam a erat. Nulla non mauris. Curabitur facilisis. Vivamus condimentum iaculis massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu mauris vitae ipsum aliquam consectetuer. Nullam sollicitudin. Aenean ultrices ligula sed ipsum. Integer vehicula tristique neque.</p>
    </div>
  
    <div id="footer"></div>
</div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
639
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
226
tyutghf
tyutghf
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
693
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top