Programming Help

Web Development



What's Here?

  • Members: 117,616
  • Replies: 431,997
  • Topics: 66,701
  • Snippets: 2,395
  • Tutorials: 631
  • Total Online: 1,972
  • Members: 52
  • Guests: 1,920

Who's Online?

Welcome to Dream.In.Code
Click Here
Getting Help is Easy!

Join 117,616 Programmers for FREE! Ask your question and get quick answers from experts. There are 1,972 online right now! We've got more than 500 tutorials and 2,000 snippets. Join and find out why Dream.In.Code is the #1 programming help community on the internet! Registration is fast and FREE... Join Now!



help me please!

 
 Closed TopicStart new topic

help me please!, Div positioning
MsAne
post 13 Jun, 2008 - 11:23 AM
Post #1


New D.I.C Head

*
Joined: 14 Feb, 2008
Posts: 18


My Contributions
Ok i have a div called calendar and rss whenever the content div expand it causes the calendar and rss Div's to go down i got like 3hrs troubleshooting, cant find the solution please help this is really frustrating.

P.S. Please feel free to constructive criticize my work im a beginner with CSS any comment to better my work will gladly be appreciated

Here is the CSS
CODE

/*Body*/
body {background: black url('images/background.jpg');
background-repeat: repeat-x;
}

/*-------------------------------Page-------------------------------*/
#page{margin:1em 3em;
padding: 0em 2.5em 0em 2.5em;
background: #898989;
width: 67em;
}

/*-------------------------------Header-------------------------------*/
#header {margin: 0;
height: 200px;
width: 100%;
background: black;
border: solid 2px gray;
}

/*-------------------------------Content-------------------------------*/
#content {margin: 4em 0em 0em 13.5em;
background: #d7d7d7;
width: 37em;
border: solid 1px silver;
padding: 4px;
}
/*-------------------------------Sidebar left--------------------------------*/
img {border:none;
}

#sidebar {margin: 4em 0em 6em 0em;
width: 10em;
background: #555555;
float: left;
padding: 0em;
clear:both;
}

#sidebar ul {margin: 0;

padding:0;

list-style: none;
line-height: 2em;
}



#sidebar li {background: transparent;

display: block;
font-size: 10pt;
border-bottom: solid 1px #707070;
}



#sidebar li ul {padding: 0px;

}



#sidebar li li {

}



#sidebar h6 {margin:0;
    color: #ececec;

    background: #252525;

    font-size: 11pt;
    text-align: center;

}



#sidebar p {
    color: white;

    padding: 20px;

}


#sidebar a:link{
color: lime;
text-decoration: underline;
}        
#sidebar a:active{
text-decoration: none;

color: lime;

}



#sidebar a:hover {
color: red;    

text-decoration: underline;

}

#sidebar a:visited{
text-decoration: none;
color: lime;
}

/*-------------------------------Calendar-------------------------------*/


#calendar {margin:-500px 0 0 0;

    width: 12em;

    background: #E8E8E8;

    color: white;
    float: right;
    

    }




#calendar h2 {

    margin:0;

    font-size: 1.2em;
    text-align: center;
    background: #555555;

}



#calendar p {
    color: white;

    padding: 20px;

}


#calendar a:active{

    color: #blue;

}



#calendar a:hover {

    color: #00aeed;

    border: 1px dashed black;

}

/*-------------------------------rss-----------------------------*/
#rss {
    margin: -400px 0 0 0;

    width: 12em;

    background: #E8E8E8;    
    color: white;
    float: right;
    clear: both;
    }




#rss h2 {

    margin:0;

    background: #555555;

    font-size: 1.2em;
    text-align: center;

}



#rss p {
    color: white;

    padding: 20px;

}


#rss a:active{

    color: blue;

}



#rss a:hover {

    color: #00aeed;

    border: 1px dashed black;

}

/*-------------------------------Footer-------------------------------*/
#footer {
height: 100px;
width: 100%;
background: #ef9c00;
font: red;
clear: both;

border: solid 3px #;
padding: 0px 0px 0px 0px;
}

#footer p {line-height: normal;

font-size: 9px;

text-transform: uppercase;

text-align: center;

color: white;    
}


here is the html

CODE


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/xhtml1-loose.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<title>Homepage</title>
</head>
<div id="page">

    <div id="header"></div><!--closes header div-->
        <div id="sidebar">

            <h6>Sitemap</h6>    
                <ul>

                

                    <li><a href="#"><img src="images/offk.gif"/>Home</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Blog</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Photos</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>About</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Links</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Contact</a></li>

                
                </ul>    
            <h6>Bock2</h6>    
                <ul>
                
                    <li><a href="#"><img src="images/offk.gif"/>Undecided</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Undecided</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Undecided</a></li>
                
                </ul>
                
            <h6>Block3</h6>
                
                <ul>
                
                <li><a href="#"><img src="images/offk.gif"/>Undecided</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Undecided</a></li>

                    <li><a href="#"><img src="images/offk.gif"/>Undecided</a></li>
                    
                </ul>
        </div><!--closes sidebar div-->
        
    <div id="content">blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
    </div><!--closes primary content div-->

    <div id="content">
            <p>blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah blah
blah blah blahblah blahblahblahvblah blah blah blah blahblahblahblahblah v blah blah bla    
blah blah blahblah blahblahblah blah blah blahblah blahblahblahvblah blah blah blah blah
    blahblahblahblah v
            </p>
    </div> <!--closes second content div-->

        <div id="calendar">
                <h2>Calendar</h2>
                <p>test</p>
        </div><!--closes calendar div-->
            
            <br/>
            
                <div id="rss">
                        <h2>RSS FEED</h2>
                        <p>test</p>
                </div><!--closes rss div-->
        
<div id="footer">
<p>test</p>
</div><!--closes footer div-->

</div><!--closes page div-->
</body>
</html>
User is offlineProfile CardPM

Go to the top of the page

Closed TopicStart new topic
Time is now: 10/7/08 11:59PM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month