CODEWITHSUNDEEP
htmlcss
Erinas
Erinas

Reputation: 45

CSS - stretching side imgs

I want to archive this img layout with CSS: http://666kb.com/i/czotlngmz2miu66q1.gif

My HTML Code is a bunch of div tags, nothing special, so I don't think there's need to post it.

For me this sounded like a simple task at first time, but ended up wasting 20h and archived nothing.

has anyone a idea to make this?

Edit1: All asked for code so I’ll show u what i just came up with:

#page {
    display:table-row;
    height:911px
}

#logo {
    background:url(../images/logo.png) top center no-repeat;
    width:800px;
    height:293px;
    position:absolute
}

#side_L {
    display:table-cell;
    background:url(../images/bg_L.png) no-repeat right top / 100% 911px;
    min-width:50%;
    height:911px
}

#mid {
    display:table-cell;
    background:url(../images/main_bg.png) top center no-repeat;
    width:800px;
    height:911px;
    max-width:800px
}

#side_R {
    display:table-cell;
    background:url(../images/bg_R.png) no-repeat left top / 100% 911px;
    min-width:50%;
    height:911px
}
<div id="page">
        <div id="side_L"></div>

        <div id="mid">
            <div id="logo"></div>

            <div id="content"></div>

            <div id="foot"></div>
        </div>

        <div id="side_R"></div>
    </div>

problem here --> it somehow works but I looks dirty anyway. Is there a better solution? All stuff from now on like logo, content & foot and such need a ->margin-top: -911px... that can't be the best way.

Upvotes: 0

Views: 71

Answers (2)

Mr Lister
Mr Lister

Reputation: 46559

Simulating a table is one way, but in this case, you can simply float the first two divs to the left, leaving the last div to take up the remaining space. The trick is the calc function that is used to give the left div half the width of what is left over when you put an 800px div in the window, so that the right div will have the same width.

Note that the sizes of the divs are too large to show in the snippet window correctly, so you'll have to go full screen to see it in all its glory.
Also note that I replaced the background pictures (which wouldn't show) with background colors.

#side_L {
  float: left;
  background: #DFD;
  width: calc(50% - 400px);
  height: 911px;
}
#mid {
  background: #DFF;
  float: left;
  width: 800px;
  height: 911px;
  max-width: 800px;
}
#side_R {
  background: #DDF;
  height: 911px;
}
<center>
  <div id="page">
    <div id="side_L"></div>
    <div id="mid">
      <div id="logo"></div>
      <div id="content"></div>
      <div id="foot"></div>
    </div>
    <div id="side_R"></div>
  </div>
</center>

Upvotes: 1

odedta
odedta

Reputation: 2478

How about this template?

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav_left {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#nav_right {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float: right;
    padding:5px;	      
}
#section {
    width:800px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
<div id="header">
    <h1>City Gallery</h1>
</div>

<div id="nav_left">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
    </p>
</div>

<div id="nav_right">
    London<br>
    Paris<br>
    Tokyo<br>
</div>

<div id="footer">
    Copyright © W3Schools.com
</div>

Upvotes: 0

Related Questions