CODEWITHSUNDEEP
htmlcss
Jahed Hussain
Jahed Hussain

Reputation: 37

Simple CSS Edit

I have a simple query which I cannot get my head around. I have an image put into my 'nav' div and it contains a red & white box. I have created a 'content' div after the 'nav' div where my content will go but it does not match the length of the image in the previous div. please see this link for a clearer picture.

<body>
<div id="wrap">

    <div id="header">
        <!-- LOGO GOES HERE -->
    </div>

    <div id="nav">
        <img src="images/nav.png" width="1076" height="99" />
    </div>

    <div id="content">
        HOW DO I ALIGN THIS DIV TO MATCH THE LENGTH OF THE WHITE BOX ABOVE?
    </div>

</div><!--End of wrap -->


    body {
    background-color:#d3d1d1;
    margin:0 auto;
}

#wrap {
    width:1076px;
    margin:auto;
}

#content {
    background-color:white;

}

Upvotes: 0

Views: 74

Answers (5)

nouveau
nouveau

Reputation: 1272

It appears that your image is not really centered. The foldy little bits aren't even. So, that is the first issue that might throw my answer off.

#content {
  margin: 0 auto; /* this centers the div | 0 margin top/bottom auto on sides */
  width: 100%;
  max-width: 1030px; /* this needs to be the exact width of your white thing in photoshop */
}

That's the simple answer... However... it requires that your photoshop image symmetrical.

Upvotes: 0

Ani
Ani

Reputation: 4523

Best idea - remove white space from image and then make the whole thing white. Add top margin, left, right and center the content using margin: 0 auto;

Upvotes: 0

Fallexe
Fallexe

Reputation: 596

Change your #content css to:

#content {
  background-color: white;
  margin-left: 22px;
  width: 1028px;
}

How this works: The margin is set to align the left side of the content box. The width is then increased until it matches the white box in the image.

EDIT Removed unnecessary left positioning as pointed out in comments

Upvotes: -1

c.millasb
c.millasb

Reputation: 86

On #content add the following properties:

width: 1029px (I find it looks better than 1028px, but you can try both)
margin-left: 22px

This will make the #content box the same size as the white space of your image, and it will align it so they both start at the same point on the left.

Upvotes: 1

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

Put the following rule on #content:

margin: 0 25px 0 22px;

It will still look ugly though since your image has a jagged soft edge on the right. You can compensate for this with a border:

#content {
    margin: 0 25px 0 22px;
    border-right: 1px solid #eee;
}

Upvotes: 1

Related Questions