1 reply [Last post]
evmedia
evmedia's picture
Offline
newbie
Last seen: 10 years 30 weeks ago
Timezone: GMT-8
Joined: 2010-11-11
Posts: 2
Points: 3

I have a website I am working on. I have run into this problem before and got creative, but I figured there has to be a better way.

Problem: I have two DIV's inside a DIV named "maincontent" I need to float one of the inner DIV's left, and the other to the right to create a content area and sidebar. However, when I float both the "maincontent" DIV collapses. I had to set a height, but I don't want to have to set a height as the content grows and shrinks. How do I get the "maincontent" DIV to grow with the content inside it?

-------------------------------------------------------

HTML:

Golden State Flag Football League

We offer both leagues and monthly tournaments throughout the Bay Area and beyond. We are currently working on our 2011 schedule and playing locations. Please continue to check back with us to see if we are coming to a city near you.

Contact Information

John Ghiorso - Commissioner
650-346-0603

Bay Area Turkey Bowl Weekend

6on6 Tournament
Date: Saturday November 27th, 2010 Time: 9am - 10pm
Field: Red Morton Community Center
1120 Roosevelt Ave. Redwood City, CA. 94061
6on6: Competitive Division
3 Games Guaranteed
Turf and Lights
$350 per team(15p max)
CLICK HERE TO REGISTER

4on4 Tournament
Date: Sunday November 28th, 2010
Time: 9:00am Field: Palo Alto El Camino Sports Complex
100 El Camino Real, Palo Alto,CA. 94306
4on4: Rec and Competitive Divisions
3 Games Guaranteed
$175 per team(10p max)
CLICK HERE TO REGISTER

-----------------------------------------------------

CSS:

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {

}

#wrapper {
width: 1024px;
background-color: #5984c4;
margin: 0px auto;
}

/* Header Area */

#header {
width: 100%;
height: 50px;
border-bottom: #FFF solid 3px;
}

#logo {
background-color: #000;
width: 243px;
height: 397px;
padding: 15px;
border-right: #FFF solid 3px;
border-bottom: #FFF solid 3px;
float: left;
}

#mainpics {
background-color: #000;
width: 748px;
height: 427px;
border-bottom: #FFF solid 3px;
float: right;
}

/* Nav Area */

a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}

#nav {background-color: #5984c4; height:35px; font:normal 14px/35px arial, verdana, sans-serif; width:1024px; margin:0 auto; position:relative; clear:both}

#nav ul {margin:0; padding:0; list-style:none;}

#nav ul.menu {position:absolute; overflow:hidden;}

#nav .menu .level1-li {float:left; width:120px; margin-top:-300px;}

#nav .menu a {display:block; width:120px; text-decoration:none; text-align:center; color:#fff;}

#nav .menu a.level1-a {position:relative; float:left; margin-right:-119px; margin-top:300px;}

#nav .menu .sub {background:#069; float:left; margin-top:-35px; padding-top:35px;}

#nav .menu .sub a {background:#c90; position:relative; margin-right:-1px;}

#nav .menu a:hover,

#nav .menu a:focus,

#nav .menu a:active {background:#069; margin-right:0;}

/* Main Content */

#maincontent {
background-color: #FFF;
border: #000 1px solid;
border-top: none;
padding-bottom: 20px;
float: none;
}

#leftcontent {
width: 577px;
height: 100%;
border-right: #333 1px dashed;
padding: 5px 20px;
margin-bottom: 25px;
float: left;
}

#sidebar {
width: 380px;
height: 100%;
margin-left: 20px;
float: right;
}

/* Individual Elements */

h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 15px 0px;
}

p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
margin-top: 10px;
}

-----------------------------------------------------------

That's it. Thanks in advance! This will actually help me when I come across these again in the future. Smile

evmedia
evmedia's picture
Offline
newbie
Last seen: 10 years 30 weeks ago
Timezone: GMT-8
Joined: 2010-11-11
Posts: 2
Points: 3

Forgot to use the CODE tag,

Forgot to use the CODE tag, my bad. Here is the HTML.

<body>
 
	<div id="wrapper">
 
    	<div id="header">
 
        </div>
 
        <div id="logo">
        <img src="images/GSFFL_logo.png" alt="Golden State Flag Football League" title="Golden State Flag Football League"/>
        </div>
 
        <div id="mainpics">
 
        </div>
 
        <div id="nav">
 
                <ul class="menu">
 
                    <li class="level1-li"><a class="level1-a" href="#url">Leagues</a></li>       
 
                    <li class="level1-li"><a class="level1-a" href="#url">Tournaments</a>
 
                        <ul class="sub">
 
                            <li><a href="#url">Coming Soon</a></li>
 
                        </ul>
 
                    </li>
 
                    <li class="level1-li"><a class="level1-a" href="#">Rules</a></li>
 
                    <li class="level1-li"><a class="level1-a" href="#">Registration</a></li>
 
                </ul>
 
        </div>
 
        <div id="maincontent">
 
            <div id="leftcontent">
            	<h1>Golden State Flag Football League</h1>
                <p>We offer both leagues and monthly tournaments throughout the Bay Area and beyond. We are currently working on our 2011 schedule and playing locations. Please continue to check back with us to see if we are coming to a city near you.</p>
            	<h1>Contact Information</h1>
                <p>John Ghiorso - Commissioner<br />
                650-346-0603<br />
                </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%69%6e%66%6f%40%72%65%6c%65%6e%74%6c%65%73%73%66%6f%72%63%65%2e%63%6f%6d%22%3e%69%6e%66%6f%40%72%65%6c%65%6e%74%6c%65%73%73%66%6f%72%63%65%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p>
                </p>
            </div>
 
            <div id="sidebar">
            	<h1>Latest News & Updates</h1>
                <p><strong>Bay Area Turkey Bowl Weekend</strong></p>
                <p><strong>6on6 Tournament</strong><br />
                Date: Saturday November 27th, 2010 Time: 9am - 10pm<br />
                Field: Red Morton Community Center<br />
                1120 Roosevelt Ave. Redwood City, CA. 94061<br />
                6on6: Competitive Division<br />
                3 Games Guaranteed<br />
                Turf and Lights<br />
                $350 per team(15p max)<br />
                <a href="register.html">CLICK HERE TO REGISTER</a></p>
                <p><strong>4on4 Tournament</strong><br />
                Date: Sunday November 28th, 2010<br />
                Time: 9:00am Field: Palo Alto El Camino Sports Complex<br />
                100 El Camino Real, Palo Alto,CA. 94306<br />
                4on4: Rec and Competitive Divisions<br />
                3 Games Guaranteed<br />
                $175 per team(10p max)<br />
                <a href="register.html">CLICK HERE TO REGISTER </a></p>
            </div>
 
        </div>    
 
    </div>
 
</body>