0

I need to know how to align all three divs next to eachother with all different background-images and the center one needs to be 989px the left div and right div their widths doesn't matter.

Kalle H. Väravas
  • 3,579
  • 4
  • 30
  • 47
Jasp3r_
  • 103
  • 4
  • 11

2 Answers2

3

In a nutshell.. http://jsfiddle.net/hobobne/qyGC5/

<style>
.sides {display: inline-block; width: 100px; border: 2px dotted green;}
#main {display: inline-block; width: 200px; border: 2px dotted blue;} /* you can change this to 989px */
</style>
<div class="sides">side 1</div><div id="main">main</div><div class="sides">side 2</div>

EDIT: The final solution: http://jsfiddle.net/hobobne/qyGC5/4/

Kalle H. Väravas
  • 3,579
  • 4
  • 30
  • 47
  • Thank you for your reply but when I try to apply this method it works but it doesnt go on to the sides when i zoom out. I also need it to be centered when I zoom out. – Jasp3r_ Jul 26 '11 at 08:05
  • Your original question did not say anything about it. If you need it to be centered, then: http://jsfiddle.net/hobobne/qyGC5/1/ – Kalle H. Väravas Jul 26 '11 at 08:19
  • I got all the divs aligned next to each other now, although i need the left and right div to be stretched when I zoom out the page. The middle div tag needs to be 989px and in the middle. – Jasp3r_ Jul 26 '11 at 08:46
  • Explain what you mean under zoomed out the page. You mean the side containers need to be with a dynamic width? And does the center container must be vertically middle? – Kalle H. Väravas Jul 26 '11 at 08:50
  • Some people have bigger screens then myself so i need the left and right div tags to be automaticly stretches to fit the screen of the person who is visiting my website. Although the middle div tag needs to be in the middle of the page at all times. – Jasp3r_ Jul 26 '11 at 08:54
  • http://jsfiddle.net/hobobne/qyGC5/3/ this is how I usually put things in the middle. Better way is to use javascript to get the size of the global_wrapper then to some calculations and position it. Vertical-align doesn't work in this case. – Kalle H. Väravas Jul 26 '11 at 09:04
  • About the sides. Do you have a wireframes or something? I basically get your idea, but I wouldn't use div containers, but table. This gives you an option to use vertical-align:; inside the cells. http://jsfiddle.net/hobobne/qyGC5/4/ Remember that as default the insides of the cells are vertical-align: middle; – Kalle H. Väravas Jul 26 '11 at 09:12
  • Isnt there a way to make the left and right div to stretch out automaticly? I need to repeat the background-image on the left and right div tag anyways. – Jasp3r_ Jul 26 '11 at 09:17
  • Ok im going to try your last comment, sorry I didn't saw that. – Jasp3r_ Jul 26 '11 at 09:18
  • As you see, it needs tweaking obviously. However, this is how I make these types of layouts myself. Using table is much more crossbrowser and does the stretching automatically, without putting the div containers on another line. – Kalle H. Väravas Jul 26 '11 at 09:20
1
<style type="text/css">
  #wrapper {
  }

  #wrapper div {
    float : left;
  }

  #wrapper #left {
    width : 300px;
    background-image : "/path/to/an_image";
  }
  #wrapper #center {
    width : 989px;
    background-image : "/path/to/another_image";
  }
  #wrapper #left {
    width : 200px;
    background-image : "/you/get/the/idea";
  }
</style>

<div id="wrapper">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>
zellio
  • 31,308
  • 1
  • 42
  • 61