Pictures in CSS

StarThunder
StarThunder used Ask the Experts™
on
I have a webpage where I want a header, 4 pictures under the header, with 3 pics also on the left and right sides, yet under the first 4, with Information in the middle between the pictures on each site.

I may be the stress I've had as of late, but I can't figure it out...
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Use divs to put the elements one under the other (so first div is the header, second are the 4 pictures, third the next pics, etc.). In the div with the pics itself, use float:left and float:right to make the pictures take the left or right side as needed. Note that you may need to reorder them (e.g. first put the pic which is the rightmost on the left side) but it should work. If you have a problem, paste the code you already have, so that we can try to give you more detailed tips.
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
I think this is what you want.

Sample http://jsbin.com/UriwAvA/2/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Padas</title>
</head>
<body>
  <div id="container">
  <div id="header">Header</div>
    <div id="left">
      <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="90">
      <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="90">
      <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="90">
    
    </div>
    <div id="main">
       <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="580">
       <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="580">
       <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="580">
       <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="580">
      
      
    </div>
    <div id="right">
      <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="90">
      <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="90">
      <img src="http://www.sogoodblog.com/wp-content/uploads/2008/01/anheuser_busch_beer.jpg" width="90">
    </div>
    
    
  </div>  
</body>
</html>

Open in new window

css
#container{width:800px;text-align:center;}
#header{background-color:green;}
#left,#main,#right{float:left;height;500px;}
#left,#right{width:100px;background-color:blue;}
#main{width:600px;background-color:red;}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial