Hi I am currently having an issue. I have two div tags, and the elements of the div tags should be aligned on the same line. (1 image + text +1 image). My problem is the 3rd element , that is the image , in order for it to appear i use float right. so it should be on the extreme right of the screen.The application run well on my screen size and the image is in the complete right corner. But when I tried to run the application on a larger screen, it do work but it leaves a blank margin on the extreme right. The image is not exactly in right corner of the screen. How do i solve this issue, that is to cater for different size of screen?

Below are the codes:

#header{width:60%; float:left; margin-bottom:10px; 
    background: transparent url('../images/l.png') no-repeat;}

    #subHead{  width:40%; float:right; margin-bottom:10px; height:55px; background: transparent url('../images/flag.png')  no-repeat;}

<div id="header" >   
        <h1 class="headerTitle"><fmt:message key="application.title"/></h1>    

<div id="subHead"></div>
4 Years
Discussion Span
Last Post by ggamble

Example page? Rest of code?

With the information given, its acting like the container its in has a set or max width.

Edited by ggamble

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.