Jump to content

CSS Alignment Help


MRGRIM

Recommended Posts

I'm finally moving away from designing layouts with tables however this CSS stuff is rather tricky :lol:

Could someone please help me center align up to 5 div's within another div?

Website example is www.myaudiodirect.com I want those 2 photographs to appear on the same line but align them to the center of the big blue div. I've tried a couple of things and Just can't see to get it right.

layout.css

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}    
body{
background-color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
width: 770px;
margin:10px auto;
border: 1px solid #000000;
text-align:left;
}

#headerlogo{
height: 300px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
}

#title{
    
}

#content{
background-image: url(../images/background.jpg);
color:#ffffff;
height: 1000px;

}

#photo{
height: 200px;
width: 150px;
margin-left: auto; 
margin-right: auto;

overflow: auto;
margin:0 auto;
background-image: url(../images/photo.gif);
background-repeat: no-repeat;    
}

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MyAudioDirect</title>
    <link href="css/layout.css" rel="stylesheet" media="all" type="text/css" />

</head>



<div id="wrapper">
    <div id="headerlogo"></div>
    
    <div id="content">
                <div id="photo" style="position: relative; top:100px;">x</div>
        <div id="photo" style="position: relative; top:100px;">x</div>
    </div>
    
</div>

</body>
</html>

Link to comment
Share on other sites

Here is a possible way to do this (Though I will be interested to hear how other people tackle this).

Wrap your photo divs in an div with an ID of photos and then alter your styles to this

#photo {
background-image:url(http://www.myaudiodirect.com/images/photo.gif);
background-repeat:no-repeat;
height:200px;
margin:0 auto;
overflow:auto;
width:150px;
float: left;
}
    
div#photos {
width: 300px;
margin: 0 auto;
}

The only thing to be aware of is that you will need to alter the width of the div#photos entry if you want to put more than two divs in.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...