Log in

View Full Version : Quick CSS Nuisance


CouldBeenAContender
10-23-2007, 08:43 AM
I have a positioning problem with the container I have made. I am trying to get the list of items to not be presented outside the container borders. There is some height restriction I have set which I have been unable to locate. Any help would be greatly appreciated.

HTML:
<!-- Left Column -->
<div id="LColumn">

<!-- Google CSE Search Box Begins -->
<div id="googleserachbox">
<form action="http://" id="searchbox_015928390418043404103:mjqxfp6gb1u">
<input type="hidden" name="cx" value="015928390418043404103:mjqxfp6gb1u" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_015928390418043404103%3Amjqxfp6gb1u"></script>
</div>
<!-- Google CSE Search Box Ends -->

<h3>Directory By State</h3>

<ul>
<li><a href="alabama.html">Alabama</a></li>
<li><a href="alaska.html">Alaska</a></li>
<li><a href="arizona.html">Arizona</a></li>
<li><a href="arkansas.html">Arkansas</a></li>
<li><a href="california.html">California</a></li>
<li><a href="colorado.html">Colorado</a></li>
<li><a href="connecticut.html">Connecticut</a></li>
<li><a href="delaware.html">Delaware</a></li>
<li><a href="DC.html">District of Columbia</a></li>
<li><a href="florida.html">Florida</a></li>
<li><a href="georgia.html">Georgia</a></li>
<li><a href="guam.html">Guam</a></li>
<li><a href="hawaii.html">Hawaii</a></li>
<li><a href="idaho.html">Idaho</a></li>
<li><a href="illinois.html">Illinois</a></li>
<li><a href="indiana.html">Indiana</a></li>
<li><a href="iowa.html">Iowa</a></li>
<li><a href="kansas.html">Kansas</a></li>
<li><a href="kentucky.html">Kentucky</a></li>
<li><a href="louisiana.html">Louisiana</a></li>
<li><a href="maine.html">Maine</a></li>
<li><a href="maryland.html">Maryland</a></li>
<li><a href="massachusetts.html">Massachusetts</a></li>
<li><a href="michigan.html">Michigan</a></li>
<li><a href="minnesota.html">Minnesota</a></li>
<li><a href="mississippi.html">Mississippi</a></li>
<li><a href="missouri.html">Missouri</a></li>
<li><a href="montana.html">Montana</a></li>
<li><a href="nebraska.html">Nebraska</a></li>
<li><a href="nevada.html">Nevada</a></li>
<li><a href="newHampshire.html">New Hampshire</a></li>
<li><a href="newJersey.html">New Jersey</a></li>
<li><a href="newMexico.html">New Mexico</a></li>
<li><a href="newYork.html">New York</a></li>
<li><a href="northCarolina.html">North Carolina</a></li>
<li><a href="northDakota.html">North Dakota</a></li>
<li><a href="ohio.html">Ohio</a></li>
<li><a href="oklahoma.html">Oklahoma</a></li>
<li><a href="oregon.html">Oregon</a></li>
<li><a href="pennsylvania.html">Pennsylvania</a></li>
<li><a href="rhodeIsland.html">Rhode Island</a></li>
<li><a href="southCarolina.html">South Carolina</a></li>
<li><a href="southDakota.html">South Dakota</a></li>
<li><a href="tennessee.html">Tennessee</a></li>
<li><a href="texas.html">Texas</a></li>
<li><a href="utah.html">Utah</a></li>
<li><a href="vermont.html">Vermont</a></li>
<li><a href="virginia.html">Virginia </a></li>
<li><a href="virginIslands.html">Virgin Islands </a></li>
<li><a href="washington.html">Washington</a></li>
<li><a href="westVirginia.html">West Virginia</a></li>
<li><a href="wisconsin.html">Wisconsin</a></li>
<li><a href="wyoming.html">Wyoming</a></li>
</ul>
</div>
<!-- End of Left Column -->


CSS:
/* Left Column Style */
#googleserachbox { /* Google Search Box */
Position: absolute; top: 10px; left: 5px;
}

#LColumn {
width: 248px;
position: absolute; top: 200px;
border-style: solid;
border-width: 2px;
border-color: #247FE7;
}

#LColumn h3 {
font-family: Lucida Sans Unicode, Arial, Helvetica, sans-serif;
color: #008ece;
text-align: center;
margin: 0px;
position: absolute; top: 50px;
}

#LColumn ul {
display: block;
list-style: none;
}

#LColumn a {
font-size: 12px;
color: #0066CC;
margin: -20px;
padding: 0px;
position: relative; top: 50px;
}
/* End of Left Column Style */
jc_gmk
10-23-2007, 09:04 AM
This should do it, i've added another div and made them relative rather than absolute.



<div id="LColumn">

<!-- Google CSE Search Box Begins -->
<div id="googleserachbox">
<form action="http://" id="searchbox_015928390418043404103:mjqxfp6gb1u">
<input type="hidden" name="cx" value="015928390418043404103:mjqxfp6gb1u" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_015928390418043404103%3Amjqxfp6gb1u"></script>
</div>
<!-- Google CSE Search Box Ends -->
<div id="mylist">
<h3>Directory By State</h3>

<ul>
<li><a href="alabama.html">Alabama</a></li>
<li><a href="alaska.html">Alaska</a></li>
<li><a href="arizona.html">Arizona</a></li>
<li><a href="arkansas.html">Arkansas</a></li>
<li><a href="california.html">California</a></li>
<li><a href="colorado.html">Colorado</a></li>
<li><a href="connecticut.html">Connecticut</a></li>
<li><a href="delaware.html">Delaware</a></li>
<li><a href="DC.html">District of Columbia</a></li>
<li><a href="florida.html">Florida</a></li>
<li><a href="georgia.html">Georgia</a></li>
<li><a href="guam.html">Guam</a></li>
<li><a href="hawaii.html">Hawaii</a></li>
<li><a href="idaho.html">Idaho</a></li>
<li><a href="illinois.html">Illinois</a></li>
<li><a href="indiana.html">Indiana</a></li>
<li><a href="iowa.html">Iowa</a></li>
<li><a href="kansas.html">Kansas</a></li>
<li><a href="kentucky.html">Kentucky</a></li>
<li><a href="louisiana.html">Louisiana</a></li>
<li><a href="maine.html">Maine</a></li>
<li><a href="maryland.html">Maryland</a></li>
<li><a href="massachusetts.html">Massachusetts</a></li>
<li><a href="michigan.html">Michigan</a></li>
<li><a href="minnesota.html">Minnesota</a></li>
<li><a href="mississippi.html">Mississippi</a></li>
<li><a href="missouri.html">Missouri</a></li>
<li><a href="montana.html">Montana</a></li>
<li><a href="nebraska.html">Nebraska</a></li>
<li><a href="nevada.html">Nevada</a></li>
<li><a href="newHampshire.html">New Hampshire</a></li>
<li><a href="newJersey.html">New Jersey</a></li>
<li><a href="newMexico.html">New Mexico</a></li>
<li><a href="newYork.html">New York</a></li>
<li><a href="northCarolina.html">North Carolina</a></li>
<li><a href="northDakota.html">North Dakota</a></li>
<li><a href="ohio.html">Ohio</a></li>
<li><a href="oklahoma.html">Oklahoma</a></li>
<li><a href="oregon.html">Oregon</a></li>
<li><a href="pennsylvania.html">Pennsylvania</a></li>
<li><a href="rhodeIsland.html">Rhode Island</a></li>
<li><a href="southCarolina.html">South Carolina</a></li>
<li><a href="southDakota.html">South Dakota</a></li>
<li><a href="tennessee.html">Tennessee</a></li>
<li><a href="texas.html">Texas</a></li>
<li><a href="utah.html">Utah</a></li>
<li><a href="vermont.html">Vermont</a></li>
<li><a href="virginia.html">Virginia </a></li>
<li><a href="virginIslands.html">Virgin Islands </a></li>
<li><a href="washington.html">Washington</a></li>
<li><a href="westVirginia.html">West Virginia</a></li>
<li><a href="wisconsin.html">Wisconsin</a></li>
<li><a href="wyoming.html">Wyoming</a></li>
</ul>
</div>
</div>
<!-- End of Left Column -->


And i've made a few ammendments to the css aswell



#googleserachbox, #mylist {
Position: relative;
}

#LColumn {
position: absolute;
width: 248px;
top: 200px;
padding:10px;
border:2px solid #247FE7;
}

#LColumn h3 {
font-family: Lucida Sans Unicode, Arial, Helvetica, sans-serif;
color: #008ece;
text-align: center;
}

#LColumn ul {
display: block;
list-style: none;
}

#LColumn a {
font-size: 12px;
color: #0066CC;
}
CouldBeenAContender
10-24-2007, 12:53 AM
That does it. It was giving me some grief, appreciate the help. Thanks
boogyman
10-24-2007, 12:46 PM
dont use absolute positioning and width in pixels.



<style type="text/css">
#LColumn {
float: left;
}
</style>