Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML
i have a very simple question that i am embarrassed even to askSmile | :)
i am making a template site which should be in that order:
 
left img | center | right img
 
when the browser in in 100% mode its look ok
but when zooming in the center goes below the image
i tried to fixed it and searched the web for the answer but with no luck
 
my goal is when the user zoom in or re-size the page, the page will only shrink
and wont effect the img or other thing in the page...
this is the html:
 
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/JScript.js" type="text/javascript"></script>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="left_ad" style="background-image: removed(images/ad_left.jpg); width:188px; height:546px;">
            
        </div>
        <div id="right_ad">
            <img alt="right_ad" src="images/ad_right.jpg" width="188px" height="546px" />
        </div>
    <div id="wrapper">
        <div id="logo_img">
            <img width="909px" src="" height="202px" alt="logo_img" />
        </div>
        <ul id="nav">
            <li><a href="index.html"></a></li>
            <li><a href="about.html"></a></li>
            <li><a href="portfolio.html"></a></li>
            <li><a href="contact.html"> </a></li>
        </ul>
        <div id="content_img">
            <img width="909px" src="" height="761px" alt="content_img" />
        </div>
        <div id="footer">
            <table id="table_footer">
                <tbody>
                    <tr>
                        <td>
                            <a href=""></a>
                        </td>
                        <td>
                            <a href="/"></a>
                        </td>
                        <td>
                            <a href="/"></a>
                        </td>
                        <td id="last_footer_link">
                            <a href=""></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

this is the css(contains unnecessary things also as i tried things)
body
{
    direction: rtl;
    background: url(../images/site_background.jpg);
    width: 100%;
}
 
#wrapper
{
    width: 910px;
    margin: auto;
    margin-top: -8px;
    display: block;
    position: relative;
}
 
#logo_img {
    margin-top: 8px;
}
#nav
{
    padding: 0;
    margin: 0px 0 0px 0;
    display: block;
    overflow: hidden;
    background: #2e2e2e url(../images/nav_bar.jpg) repeat-x;
    list-style: none;
    font-size: large;
    height: 39px;
    width: 909px;
}
 
#nav li
{
    display: inline;
}
 
#nav li a
{
    padding: 10px 20px;
    float: right;
    display: block;
    color: white;
    text-decoration: none;
}
 
#nav li a:hover
{
    background: #1b1b1b url(../images/nav_bar.jpg);
}
 
#table_footer
{
    margin: 0 auto;
}
 
#footer td
{
    font-size: 12px;
    border-left: 0.05cm solid #b3b2b2;
    padding-right: 10px;
    padding-left: 10px;
}
 
#footer a
{
    color: #363535;
    border-spacing: 2px;
    text-decoration: none;
}
#footer #last_footer_link
{
    border-left: none;
}
 

 
#right_ad
{
    margin-right: 214px;
    margin-top: 386px;
    float: right;
}
 
#left_ad
{
    margin-left: 214px;
    margin-top: 386px;
    float: left;
}

 
any help will be appreciate ...
Thanks a lot in advanced
Posted 21-Jun-12 11:35am
eran11341

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hey,
 
Following is the solution for your query. I used the percentage in style to get your expectation.
HTML
 
<div class="page">
  <div class="wrapper">
    <div class="left"> <img alt="right_ad" src="http://www.thelifestylecompound.com/wp-content/uploads/2013/11/tumblr_mp8pwtsHbt1sxrbl4o1_5001.jpg" /> </div>
    <div class="center">center text</div>
    <div class="right"> <img alt="right_ad" src="http://www.hdwallpapersonly.com/wp-content/uploads/2014/05/Quotes-Nelson-Mandela2.jpg"  /> </div>
    <div class="footer">footer</div>
  </div>
</div>
 

CSS
 
body {
    margin: 0;
    padding: 0;
    font: 90%/130% Arial, Helvetica, sans-serif;
    text-align:left;
}
.page{margin: 0 auto;width: 90%;}
.wrapper {
 
    float:left;
    border: 1px solid red;
}
.left, .center, .right {
    float: left;
    width: 30%;
}
.left {
    border: 1px solid green;
}
.right{border:1px solid black; text-align:right;}
.right img{ text-align:right;}
.left img, .right img {
    width: 100%;
    height: auto
}
.footer{ clear:both;}
 
Live Demo Link to better understand
 
http://codepen.io/ashishbhatt/pen/wLeFI[^]
  Permalink  
Comments
Sunasara Imdadhusen at 20-May-14 1:43am
   
Excellent! good solution Ashish, your efforts should be appreciated. my vote 5
Ashishbhatt007 at 20-May-14 1:49am
   
Thanks Imdadhusen

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 5,380
1 Sergey Alexandrovich Kryukov 4,693
2 Peter Leow 2,939
3 DamithSL 2,465
4 Maciej Los 2,230


Advertise | Privacy | Mobile
Web01 | 2.8.140718.1 | Last Updated 20 May 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid