Member Avatar for techyworld

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>

<div id="subHead"></div>
  • 2 Contributors
  • 1 Reply
  • 145 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by BMXDad
Member Avatar for BMXDad

Example page? Rest of code?

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

Edited by BMXDad
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.