Search code examples
csslayoutliquid-layout

One-Column Layout with liquid images on either side


What I want to be able to do is to have a 700px column with an image to the left of it with a 20% width and an image to its right with a width that takes up the rest of the page on the right side. SO essentially from left to right there will be a 20% wide image, then a 700px wide column with the content of the site, and then an image on the right that takes up the rest of the width of the page. I have been struggling with how to do this, and I feel like I'm making it too complicated.


Solution

  • <div id="leftImage" style="float:left;width:20%;background-repeat:no-repeat;background-image:url(URL TO LEFT IMAGE); height: HEIGHT OF LEFT IMAGE IN px;">&nbsp;</div>
    <div id="content" style="width: 700px;float:left;">CONTENT</div>
    <div id="rightImage" style="float:left;background-repeat:no-repeat;background-image:url(URL TO RIGHT IMAGE); height: HEIGHT OF RIGHT IMAGE IN px;">&nbsp;</div><br clear="all" />
    

    Try something like that.