css positioning

ivyholly · #1 (**permalink**) Dec 11th, 2005, 19:54

Salutations,

I`ve got a main div with a sidebar div on the right. When there`s not enough content in the main div, the content from the sidebar goes under the main, instead of staying on the right. Is there an easy way to keep this from happening? (Other than inventing new content...

)

Maybe I should have posted this in my last css thread; the stylesheet can be seen there...

ivyholly · #2 (**permalink**) Dec 11th, 2005, 22:27

Here`s the css:

HTML: Select all

/* CSS Document */
body,
html {
    margin:0;
    padding:0;
    background:#ffcc99;
    color:#000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    }
body {
    min-width:750px;
    }
#wrap {
    background:#fff;
    margin:0 auto;
    width:750px;
    }
#header h1 {    
    margin:0;
    padding:10px;
    background:#fff;    
    }
#main h2, #main h3, #main h4, #main p, #main ul {
    padding:0 10px;
    background:#fff;
    float:left;
    width:500px;
    }
#main td {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
}
#sidebar ul {
    margin-bottom:0;
    background:#fff;
    float:right;
    width:240px;
    }
#footer  p {
    padding:5px;
    margin:0;
    background:#0000cc;
    clear:both;
    }
#sidebar h3, #sidebar p {
    padding:10px 10px 0 0;
    background:#fff;
    }
a:link {
    color: #0000cc;
    text-decoration: none;
    }
a:visited {
    color: #ff9933;
    text-decoration: none;
    }
a:active {
    color: red;
    text-decoration: none;
    }
a:hover {color: #999999; 
    text-decoration: underline;    
    }
a img {border: none; }

benbramz · #3 (**permalink**) Dec 11th, 2005, 22:33

got a link so we can see what you mean...

jus got back from work n my brain functions like windows on a good day (bad....) lol

ivyholly · #4 (**permalink**) Dec 11th, 2005, 22:37

I`ll try to make a screen shot and get back to you; it`s not a url yet...

ivyholly · #5 (**permalink**) Dec 11th, 2005, 22:49

Ok, so...hope you can see...

Pheonix · #6 (**permalink**) Dec 12th, 2005, 21:33

Put all the menu items in one div, have that div float left.
But its kinda hard to tell without seeing any html code...

ivyholly · #7 (**permalink**) Dec 13th, 2005, 01:13

Thanks Phoenix. The menu items are all in one div, so I`ll try the float left suggestion. I`ll be back with the html if I have trouble; I`m extremely new to all this...

herkalees · #8 (**permalink**) Dec 13th, 2005, 02:23

It's a lot easier to take note of the width of the thinner <div>, for instance: 175px or 25%, then simply add that as a margin right for the bigger <div>.

Like this:

<html>
<div id="main">some content</div>
<div id="side">side content</div>
</html>

CSS: #main {margin-right:175px;} #side {width:175px;}

This way, no matter what is longer than what, the main content area will always stay 175px away from the right edge.

ivyholly · #9 (**permalink**) Dec 13th, 2005, 04:20

Thanks herkalees, sounds good. I`ll post back to let y`all know how it went...

ivyholly · #10 (**permalink**) Dec 13th, 2005, 18:51

Well, I tried both suggestions, and unfortunately I`m still not happy (sorry). I`m probably not doing it right. I found the float suggestion worked, but it didn`t look as good to me as having the sidebar on the right. And I think I`m not using the correct numbers for the margin suggestion, because the result was the same, more or less. Thought I had understood, but...

I think I`ll finish the rest of the pages on the site, then load it all up. There are other issues I need help with anyway, and then y`all can see what the heck I`m doing! Or trying to do, anyway...

I`ll be baaaack!

Pheonix · #11 (**permalink**) Dec 13th, 2005, 19:14

gives us html, or give us liberty!

herkalees · #12 (**permalink**) Dec 13th, 2005, 20:04

Quote:

Originally Posted by ivyholly

Well, I tried both suggestions, and unfortunately I`m still not happy (sorry). I`m probably not doing it right. I found the float suggestion worked, but it didn`t look as good to me as having the sidebar on the right. And I think I`m not using the correct numbers for the margin suggestion, because the result was the same, more or less. Thought I had understood, but...
I think I`ll finish the rest of the pages on the site, then load it all up. There are other issues I need help with anyway, and then y`all can see what the heck I`m doing! Or trying to do, anyway...
I`ll be baaaack!

Oh boy, I just looked at the code I offered and I realized what I wrote was wrong... [napoleon dynamite]Idiot![/napoleon dynamite]
Try this:
<html>
<div id="main">some content</div>
<div id="side">side content</div>
</html>
CSS: #main {margin-right:175px; float:left;} #side {width:175px;}

ivyholly · #13 (**permalink**) Dec 14th, 2005, 01:58

Thanks herkalees; lemme get back to ya on that.

ivyholly · #14 (**permalink**) Dec 19th, 2005, 16:06

I`d really appreciate any help; here`s the html so far-

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Piano Advantages</title>
<link rel="stylesheet" type="text/css"
href="2col.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="piano, student, first instrument, advantages" /> 
<meta name="description" content="The advantages of piano as a first instrument." />
</head>

<body><div id="wrap">
 <div id="header"><h1><img src="gradnote212.gif" alt="large eighth note" />Make Your Music Lessons More Fun</h1></div>
    <div id="main"><h2>Advantages of Piano as a First Instrument</h2>
                  <p>1. In 
                terms of reading music, the learning of many other instruments 
                is simplified because usually both treble and bass clefs are already 
                used when learning to play piano.</p>
              <p>2. Many 
                notes can be played simultaneously, therefore harmony (chords) 
                can be learned as well as melody and rhythm.</p>
              <p>3. Technically, 
                the piano is an easy instrument to play; only the pressing of 
                keys (and pedals) is required.</p>
              <p>4. The 
                subtle variations of intonation are not an issue; out of tune 
                sounds are never a problem (assuming the piano is kept in tune.)</p>
              <p>5. An 
                inexpensive keyboard is all one needs when beginning. After a 
                while, when it has been proven that the student is commited to 
                using it, one should consider upgrading to a better instrument, 
                such as an acoustic piano or digital piano, depending on one`s 
                budget.</p>
    </div>
        <div id="sidebar">
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2col.htm">Welcome Page</a></p>
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2faq.htm">Questions Answered</a></p>
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2motivation.htm">Motivation And Inspiration</a></p>
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2pianoadv.htm">Piano Advantages</a></p>
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2parents.htm">Tips For Parents</a></p>
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2teachingmeth.htm">Teaching Method</a></p>
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2faverep.htm">Favourite Repertoire</a></p>
<p><img src="iddybiddynote.gif" alt="small eighth note" /><a href="2resources.htm">Resources</a></p></div>
    <div id="footer">
     <p><a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
     </p></div>
         </div>            
</body>
</html>

Also, I`ve lost the instruction for how to add a decorative, thin horizontal line with a small image to the left of it. If I could add that to the content, it might work to solve my problem-

Can anyone help?

ivyholly · #15 (**permalink**) Dec 20th, 2005, 18:43

Well, never mind; after adding decorative hor. lines (found out how- hr), it didn`t look good, so I solved the problem by adding an appropriate image to the content. But thanks for your earlier suggestions, Phoenix and herkalees

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Positioning between <h3>	konnor5092	Web Page Design	3	Sep 11th, 2007 22:37
CSS and positioning	djme	Web Page Design	6	Feb 3rd, 2006 13:27
Positioning with CSS	Tino	Web Page Design	8	Jan 21st, 2006 15:45
Positioning with css	Hub	Web Page Design	12	Dec 13th, 2005 19:45
div positioning	benbacardi	Web Page Design	10	May 24th, 2004 12:25

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css positioning