HTML CSS: How to align grid to content area? -
demo: http://www.mindtale.com/portfolio.html
i want have scrollable 3 x 4 grid open portfolio section. how can adjust grid content center , maybe 150px top start below header?
portfolio.html
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style2.css"> <title>mindtale test home</title> </head> <body> <!-- header --> <div id="headerlogo"> <a href="index.html"><img src="images/logo.png"></a></div> <div id="headerfill"></div> <div id="header"></div> <div id="headerlink1"> <a href="portfolio.html">portfolio</a> </div> <div id="headerlink2"> <a href="contact.html">contact</a> </div> <!-- content --> <div id="portfolio-grid"> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">bbc news</a></div> <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div> <div class="website-description">a popular destination up-to-date news in uk , around world.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">envirogadget</a></div> <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div> <div class="website-description">one of dan's websites focusing on best of eco-friendly gadgets.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.google.co.uk" target="_blank">google</a></div> <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div> <div class="website-description">the search engine people use.</div> <div class="website-clear"></div> </div> <br><br> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">bbc news</a></div> <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div> <div class="website-description">a popular destination up-to-date news in uk , around world.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">envirogadget</a></div> <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div> <div class="website-description">one of dan's websites focusing on best of eco-friendly gadgets.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.google.co.uk" target="_blank">google</a></div> <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div> <div class="website-description">the search engine people use.</div> <div class="website-clear"></div> </div> <br><br> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">bbc news</a></div> <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div> <div class="website-description">a popular destination up-to-date news in uk , around world.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">envirogadget</a></div> <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div> <div class="website-description">one of dan's websites focusing on best of eco-friendly gadgets.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.google.co.uk" target="_blank">google</a></div> <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div> <div class="website-description">the search engine people use.</div> <div class="website-clear"></div> </div> <br><br> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://news.bbc.co.uk" target="_blank">bbc news</a></div> <div class="website-url"><a href="http://news.bbc.co.uk" target="_blank">http://news.bbc.co.uk</a></div> <div class="website-description">a popular destination up-to-date news in uk , around world.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.envirogadget.com" target="_blank">envirogadget</a></div> <div class="website-url"><a href="http://www.envirogadget.com" target="_blank">http://www.envirogadget.com</a></div> <div class="website-description">one of dan's websites focusing on best of eco-friendly gadgets.</div> <div class="website-clear"></div> </div> <div class="portfolio-website"> <div class="website-thumbnail"><a href="http://news.bbc.co.uk" target="_blank"><img src="images/gridimg1.png" alt="bbc news"></a></div> <div class="website-name"><a href="http://www.google.co.uk" target="_blank">google</a></div> <div class="website-url"><a href="http://www.google.co.uk" target="_blank">http://www.google.co.uk</a></div> <div class="website-description">the search engine people use.</div> <div class="website-clear"></div> </div> <!-- <div id="content"> <h2>a random heading</h2> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> <p>content placeholder ... </p> </div> --> <!-- footer --> <div id="footer"> mindtale © 2013 </div> </body> </html> style.css
html { height:100%; /* fix height 100% ie */ max-height:100%; /* fix height other browsers */ background: url(images/bg.jpg) no-repeat center center fixed; /* add background image */ -webkit-background-size: cover; /* fix height other browsers */ -moz-background-size: cover; /* fix height other browsers */ -o-background-size: cover; /* fix height other browsers */ background-size: cover; /* fix height other browsers */ } /* header */ /* -------------------------------------------------- */ div#header { z-index:3; position:fixed; background: url(images/header.png) no-repeat center; height: 102px; top:0px; left:0px; width:100%; padding: 0px; } div#headerfill { z-index:4; position:fixed; background: url(images/headerfill.png) repeat-x; height: 98px; top:0px; left:0px; width:100%; padding: 0px; } div#headerlink1 { font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size:90%; z-index:4; position:fixed; top:55px; left:18%; color:#999; padding: 0px; } div#headerlink2 { font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size:90%; z-index:4; position:fixed; top:55px; left:78%; color:#999; padding: 0px; } div#headerlogo { z-index:5; position:fixed; top:30px; left:42%; color:#999; padding: 0px; } /* content */ /* -------------------------------------------------- */ div#content { position:fixed; width:100%; color:#222; top: 70px; bottom: 0; left: 0; right: 0; padding: 25px; overflow: auto; font-family: "lucida sans unicode", "lucida grande", sans-serif; } /* footer */ /* -------------------------------------------------- */ div#footer { position:fixed; bottom:0px; left:0px; width:100%; color:#999; background:#333; padding: 8px; } style2.css
/* grid example */ #portfolio-grid .portfolio-website { width: 300px; float: left; height: 245px; border: 1px solid #bad4e3; background: #e3eaf2; text-align: left; margin: 15px; } #portfolio-grid .website-description { text-align: left; } #portfolio-grid .website-name { font-size: 10pt; } #portfolio-grid .website-url { display: none; } #portfolio-grid .website-thumbnail { float: none; text-align: center; margin: 3px auto 10px; } #portfolio-grid .footer { clear: both; }
because you're using floats, have make containers overflow: hidden or overflow: auto in order have them fit children. then, use margin: 0 auto center it. i've noticed you've put top: 300px on #gridcontainer - in order take effect, must set position attritube. here, i've set relative since still need rely on automatic margins:
#gridcontainer { top: 150px; position: relative; overflow: hidden; width: 996px; margin: 0 auto; }
Comments
Post a Comment