Expandable Centered div with Left Aligned divs Inside

+2 Brandon Quirarte · December 14, 2014
Pictures:
/images/forum/upload/2014-12-14/9e238eb3300ae3eb8d9333db982fe10f.png/images/forum/upload/2014-12-14/c1844c3b6f8df383beb495b9889b1251.png
(hoping pics aren't too big/small)

So I am trying to make a website where there is a centered div that contains multiple other divs.  As the window expands, the centered div should expand when there is room to move one of the inner divs up.  The inner divs should also stay aligned to the left.  The inner divs are of a fixed height and width.

Anyone have any idea / any tips on how to do this?

Post a Reply

Replies

Oldest  Newest  Rating
+1 Ron Butcher · December 15, 2014
You can also use the float element.  Make the width of your centered div a percent rather than a fixed width, then float the elements inside.

<style>
div.smallDiv { float: left; }
div.clear { clear: both; }
</style>
<div id="container" width="80%">
<div class="smallDiv">content</div>
<div class="smallDiv">content</div>
<div class="smallDiv">content</div>
<div class="smallDiv">content</div>
<div class="smallDiv">content</div>
<div class="clear"></div>
</div>

Because of the way that float works, the last div with the class of clear is necessary to expand the container to the proper height (try it without and you will see what I am talking about).
0 Ricky singh · December 14, 2014
hey friend you can either use responsive method anyways i am sharing an example with you run it and try modifying it according to your need

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body,html{margin:0;padding:0;}
#mainDiv{width:40%;padding:10px;background:lightgrey;margin:0 auto;text-align:center;position:relative}
.smallDiv{width:50px;height:50px;background:black;margin:5px;display:inline-block}
</style>
</head>
<body>
<div id="mainDiv">
<div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div><!--
--><div class="smallDiv"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
  • 1

HTML / CSS / Web Design

103,477 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators