Simple CSS Edit

Question

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;

}

wrap #nav and #content in a new div#main and give all alignment properties to it. — Sourabh
– Sourabh, Commented May 30, 2013 at 23:30

c.millasb · Accepted Answer · 2013-05-30 23:29:25Z

1

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.

answered May 30, 2013 at 23:29

c.millasb

864 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sourabh Over a year ago

I think this will fail on window resize

c.millasb Over a year ago

Agreed, although right now the website is not being coded responsive (ie. the image has a fixed width as well). If they were looking to make it resizable, it would be best to use % for the width, instead of px, both on the image in 'nav' and in the 'content'

Niels Keurentjes · Accepted Answer · 2013-05-30 23:22:59Z

1

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;
}

answered May 30, 2013 at 23:22

Niels Keurentjes

42.1k9 gold badges103 silver badges138 bronze badges

Comments

Ani · Accepted Answer · 2013-05-30 23:30:33Z

0

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;

answered May 30, 2013 at 23:30

Ani

4,5434 gold badges28 silver badges32 bronze badges

3 Comments

Sourabh Over a year ago

You mean top padding. And the id is nav so probably the white space is temporary.

Ani Over a year ago

But adding a white space using image doesn't make sense, when you can easily add using background white and adjust accordingly.

Sourabh Over a year ago

I mean, he added white space /img just for the time being to see if everything aligns right. It can later be replaced with an actual nav menu. In that case, padding would be, you know, ...

nouveau · Accepted Answer · 2013-06-04 23:14:27Z

0

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.

edited Jun 4, 2013 at 23:14

answered May 30, 2013 at 23:45

nouveau

1,2721 gold badge9 silver badges15 bronze badges

Comments

Fallexe · Accepted Answer · 2013-05-30 23:29:53Z

-1

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

edited May 30, 2013 at 23:29

answered May 30, 2013 at 23:22

Fallexe

5962 silver badges11 bronze badges

2 Comments

Niels Keurentjes Over a year ago

Why not just add a margin to the left and right then... this approach is overly complex with the relative positioning.

Fallexe Over a year ago

I usually use SCSS and I like to store the width as a variable that I can use to help determine the width of subelements. So, personal preference.

Collectives™ on Stack Overflow

Simple CSS Edit

5 Answers 5

2 Comments

Comments

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related