2

Please can you check this example website. if I read the code well (just had a sight) it's setup with tables with some javascript so that a centered container can always stay at the center, and that the body has got two fluid color backgrounds which expands according to the screen size.

I was attempting to reproduce something like this but just using css, I am quite sure I could but can't figure how. please could you give me some indication/document to read.

2 Answers 2

1

i have designed a simple structure here in Jsfiddle,have a look

MARK-UP::

<div class="wrapper">
   <div class="head_wrapper">
      <div class="left_head">left</div>
      <div class="right_head">right</div>
  </div>
 <div class="body_wrapper">
      <div class="left_body">left</div>
      <div class="right_body">right</div>
 </div>
</div>

CSS ::

.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
 background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
1
  • nice but it doesn't work as it should! if you try to zoom - and + the example site, the middle line between the boxes change its position to let all the inner content to be centred, so it should change the percentage according to the resolution. I'm quite pessimistic about doing it without tables and javascript. :/ Sep 3, 2013 at 10:48
0

You're just asking for horizontal centering, on a fixed-width container. This is easily done entirely in CSS. Simply set for your container (the element that wraps around your entire site):

.container {
    width: 800px;
    margin: 0 auto;
}

The "auto" will automatically even out the left and right margins (with no margin on top and bottom.)

[Edit: oops forgot a bit]

As for the blocks of colour, you can achieve this with a background image on your element, that's 1px wide and however tall you need. Just set it to repeat-x.

If your two sections have the possibility of having different heights, you can break it up, so that:

  1. One container is full-width, and has the background colour. An inner container will then be fixed-width with auto margins as above;
  2. Another container is full-width, and has the lighter background colour. An inner container will then be fixed-width with auto margins as above.

This means your code will be something like:

<div class="headercontainer">
    <div class="header> This is my header </div>
</div>
<div class="maincontainer">
    <div class="main"> This is rest of my copy. </div>
</div>

And your CSS:

.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header, 
.maincontainer .main { width: 800px;
    margin: 0 auto; }

HTH :)

4
  • I'm stuck with the 1px image thing. can you clarify where to put it? I suppose in the .main class but it must comprehend all the left side. and the container must be aligned with the header cut!! Sep 3, 2013 at 7:40
  • @il_maniscalco If you put a 1px wide image that paints the darker and the lighter backgrounds, you would put it on html element: html { background: url('/images/html-bg.png') repeat-x 50% 0; } but then you have to fix the height of .headercontainer to the height of the darker background in the image. More sustainable is to do it the second way I described, with multiple containers for the different sections.
    – Ming
    Sep 4, 2013 at 1:00
  • I think that won't help me as this is a fluid layout, if I put a 1px high image in the background it won't stretch as I need... however I gave up with this thing for now, probably I need to tweak it using javascript or js frameworks... Sep 4, 2013 at 8:32
  • That's why I wrote, if your layout requires a changeable height, you should do it the second way. Read from where I write "If your two sections have the possibility of having different heights ..." and follow the second method. It should work.
    – Ming
    Sep 4, 2013 at 8:40

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.