1

I am failing miserably at getting my layout to behave properly with a two column-div layout

There is a content wrapper, then a navigation menu on the left and main content on the right.

For some reason the main content is centering based on the content-wrapper, and not on its own width. I'm not sure how to get the main-content to center within itself.

HTML:

<body>
<div id="wrapper">

<!-- #BeginLibraryItem "/Library/header.lbi" -->
<div id="header"></div>
<!-- END HEADER -->
<!-- #EndLibraryItem -->

<div class="clear"></div>

<div id="content-wrapper">

<!-- #BeginLibraryItem "/Library/navigation.lbi" -->
<div id="navigation">
    <p class="Home-Page-L_Panel"><a href="http://www.twitter.com/kosherCruises"><img src="http://twitter-badges.s3.amazonaws.com/follow_bird_us-b.png" alt="Follow kosherCruises on Twitter"></a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Passover10">Passover</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#KCruises">Kosher Cruises</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Sukkot">Sukkot</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#GKTours">Kosher Tours</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#JHTours">Heritage Tours</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="links/Interesting-Links.htm">Links</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="Contact.htm">Contact Us</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="index.htm">Home</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Candle">Candle Lighting</a></p>

    <div><img src="OTBGifs/el_al_whitebkgrd-100W.jpg" alt="El Al It's not just an  airline. It's Israel." width="100" height="24" border="0"></div>

    <div align="left"><a href="http://www.travelex-insurance.com/index.asp?location=05-0686&go=bp;"><img src="Travelex_Images/Linking Graphic_small.GIF" alt="Travelex Insurance" width="100" height="66" border="0"></a></div>


    <p>Time in Jerusalem</p>
    <div align="left">
                <iframe src="http://free.timeanddate.com/clock/i1q3n65d/n676/fn5/tcddd/ahl/bas5/bat6/baceee/pa2" frameborder="0" width="103" height="33"></iframe>
    </div>
    <div><img src="http://www.judaicawebstore.com/AffiliatePro/scripts/imp.php?a_aid=5547af81c16e2&amp;a_bid=3d5614ac" width="1" height="1" alt="" /></div>
    <object width="120" height="600">
        <param name="movie" value="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac">
        <param name="menu" value="false"/>
        <param name="quality" value="medium"/>
        <param name="wmode" value="Opaque"/>
        <embed src="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac" width="120" height="600" loop="false" menu="false" swliveconnect="FALSE" wmode="Opaque" allowscriptaccess="always">
    </object>                   
</div>
<!-- END NAVIGATION -->
<!-- #EndLibraryItem -->

<div id="main-content">

<h1>The Site for Kosher Travel</h1>




</div><!-- END MAIN-CONTENT -->

</div><!-- END CONTENT-WRAPPER -->


<!-- <div class="clear"></div> -->
<div id="footer">
</div><!-- END FOOTER -->


</div><!-- END WRAPPER -->
</body>

STYLES:

/* CSS Document */
body {
    background-image:url(OTBGifs/116a8b.GIF);
}

/* unvisited link */
a:link {
    color: #000099;
}

/* visited link */
a:visited {
    color: #000099;
}

/* mouse over link */
a:hover {
}

/* selected link */
a:active {
    color: #0000FF;
}

h1, h2, h3, h4, h5, h6, p
{
    font-family: Times New Roman, Times, serif;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 16px;
}

p {
    font-size: 16px;

}

#wrapper {
    width: 740px;
    margin-left: auto;
    margin-right: auto;
    background-color:#848484;
}

#navigation {
    width: 132px; 
    display: inline-block;
    margin-top: 0px;
    vertical-align: top;
    background-color: #ffffff;
}

.clear {
    clear: both;
    margin:0px;
}

.Home-Page-L_Panel
{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-weight: bold;
    font-style: italic;
}

a.Home-Page-L_Panel
{
    text-decoration: none;
}

#header {
    width: 100%;
    height: 113px;
    background-color: #6699FF;
}

#main-content {
    vertical-align: top;
    margin-left: 132px;
    display: inline-block;

}

#content-wrapper {
    margin-top: 0px;
}

Any help would be appreciated.

Image of current layout showing how the "The Site for Kosher Travel" is not properly centered within its div:

Image of current layout showing how the "The Site for Kosher Travel" is not properly centered within its div

6
  • Can you post an image of what you are looking for? A sample layout, may be draw in Paint?
    – absqueued
    Jun 12, 2015 at 19:42
  • I've added an image showing the bad centering. Thanks!
    – SouthFresh
    Jun 12, 2015 at 19:50
  • I see that. Now I doubt if you have the same code here as you have in your actual page. Here content-wrapper and main-content is missing the width.
    – absqueued
    Jun 12, 2015 at 19:53
  • One moment, I'll edit.
    – SouthFresh
    Jun 12, 2015 at 19:53
  • I have updated the post to show the full code, except for the <head>
    – SouthFresh
    Jun 12, 2015 at 19:56

5 Answers 5

0

I would suggest using text-align: center within the #main-content. I only see it within your h1.

2
  • This modification resulted in no change to the output. Thanks.
    – SouthFresh
    Jun 12, 2015 at 19:53
  • That doesn't do anything!
    – clickbait
    Jun 12, 2015 at 19:59
0

I'm assuming you want the left nav to use 132pixels in width, and the main-content nav to use the remaining screen width. You need to float your nav container to the left, then for the main-content div, set it to display: block and give it left-margin equal to the width of the left nav:

#navigation {
  width: 132px; 
  display: inline-block;
  margin-top: 0px;
  vertical-align: top;
  float: left;    <----------- here
}

#main-content {
  vertical-align: top;
  display: block;     <------- here
  margin-left: 132px  <------- and here, increase this to add space between the two columns
}

To ensure that any content after #content-wrapper renders beneath the whole thing, add a clearfix to your CSS:

#content-wrapper:after {
  content: "";
  display: block;
  clear: both;
}

Example: https://jsfiddle.net/bcoom7rn/1/

3
  • If I float the navigation section, won't #main-content flow around the bottom of the navigation if #main-content ends up longer than the navigation?
    – SouthFresh
    Jun 12, 2015 at 19:59
  • That's what the margin-left is for on the #main-content rule. That ensures any content in the #main-content container is positioned no further left that whatever you set it to. Jun 12, 2015 at 20:00
  • Aha! Thank you. will try now.
    – SouthFresh
    Jun 12, 2015 at 20:01
0

I see your full code and see that you have few fundamental issue with the way you have written your layout.

Things you can do:

  1. Use width for #main-content
  2. Use float layout

1 Update CSS for #main-content

#main-content {
    vertical-align: top;
    display: inline-block;
    width:604px;
}

Notice, I have removed margin-left. See here: http://jsfiddle.net/tg68m6mp/

2 Use floats layout. (Good, old way)

Use float on both #navigation and #main-content, also give width and use clearfix div which you already have. See here: http://jsfiddle.net/56bnk5s4/

0

try this....

#main-content { width: calc(100% - 136px);margin-left: auto; };
h1 { text-align: center;  }  /* this h1 is inside main-content div*/
2
  • But you need to remove the margin-left: 132px on #main-content for that to work.
    – clickbait
    Jun 12, 2015 at 23:10
  • 1
    yes,otherwise use float or any other method explained by others....but for every other solution you have to change existing css just like in this case Jun 12, 2015 at 23:50
0

Actually, h1 is NOT centering based on the #content-wrapper. It just happens that your container size made it SEEM like it's in the center of the #content-wrapper.

Apply these styles to #main-content:

right: 132px;
left: 0;
top: 0;
bottom: 0;
position: absolute;

Apply these styles to #content-wrapper:

position: relative;

Remove these styles from #main-content:

margin-left: 132px;

Hope that helps!

2
  • This is good since you can change the width of the #content-wrapper, and it'll still look just fine.
    – clickbait
    Jun 12, 2015 at 20:07
  • in this case you are also removing the left margin just like my solution....so why this is better Jun 12, 2015 at 23:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.