CODEWITHSUNDEEP
htmlcss
bnjmnhrns
bnjmnhrns

Reputation: 31

I'm trying to display images horizontally using CSS

I have a series of images I would like to display horizontally on my website, using CSS and divs. I've looked at several posts about how to display images horizontally already and I wasn't able to get any of them to work.

Here's the code from the page I'm referring to:

 <head>
 <link rel=StyleSheet href="style.css" type="text/css" media=screen>
 <style>
 div.imageBox {
   float: left;
   margin-right: 10px;
   }

 div.imageBox p {
 text-align: center;
   }

 </style>
 </head>
 <body>
 <?php include 'header.php'; ?>
 <div id="content">
 <div id="container">

 <div class="imageBox">
 <img src="image" width="800" height ="600">
 </div>

 <div class="imageBox">
 <img src="image" width="600" height ="450">
 </div>

 <div class="imageBox">
 <img src="image" width="800" height ="450">
 </div>

 </div>
 </div>
 </body>

and here's the code for the style sheet: 

body{
font-family: helvetica, arial, sans-serfif; 
font-size: 14px;}

div#menu {
display: inline;
text-align: center;
width: auto;
top: 20px;
margin-left: 10%;
margin-right: 10%;
background: transparent;
height: 10px;
position: fixed;
}


div#menu ul {
margin: 0;
display: block;
}

div#menu ul li {
padding-right: 55px;
display: inline;
}

div#content {
padding-top: 40px;
text-align: center;
}

div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}

a:link {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}

Is there perhaps an easier way for me to do this?

Thanks for your help!

Upvotes: 2

Views: 13987

Answers (4)

Kalle H. V&#228;ravas
Kalle H. V&#228;ravas

Reputation: 3615

Here is the example: http://jsfiddle.net/hobobne/d5sYM/

<html>
<head>
    <style>
        img {width: 100px; height: 100px;}
        .imageBox {display: inline-block; border: 1px solid grey; background: silver; padding: 4px; text-align: center; font-size: 10px;}
    </style>
</head>
<body>
    <div class="imageBox">
        <img src="http://screenshots.en.softonic.com/en/scrn/80000/80669/easter-icons-5.jpg"><br>
        Image 1
    </div>
    <div class="imageBox">
        <img src="http://l-userpic.livejournal.com/82523298/2181918"><br>
        Image 2
    </div>
    <div class="imageBox">
        <img src="http://www.jellymuffin.com/icons/emo/images/30.jpg"><br>
        Image 3
    </div>
</body>
</html>

Upvotes: -1

Jayne Mast
Jayne Mast

Reputation: 1487

Try to change

div#container{
 float: left;
 display: inline;
 height: 800px;
 width: 0px;
}

into

div#container{
 float: left;
 display: inline;
 height: 800px;
 white-space: nowrap;
}

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116110

Images will align next to each other. If you need the divs, you can give them the style display: inline to make them behave in the same way. You can also use float: left, but that will make things harder in most cases.

You can apply styles like margins and borders to images too, so you may not need the divs. Although I'm not sure how you want it to look exactly.

Upvotes: 1

JaCraig
JaCraig

Reputation: 1078

add: div.imageBox { float: left; margin-right: 10px; display:inline; }

You're using divs which are block elements when you should be using something inline.

Upvotes: 1

Related Questions