Member Avatar for techyworld

i have a header.jsp file with the following div tag:

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<fmt:setBundle basename="bundles.application-resources"/>

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

<div id="login" ><jsp:include page="/WEB-INF/sitemesh-common/login.jsp" /></div>

and my css file as follows:

#header{solid #999;margin-bottom:10px;float:top left;min-width:960px;
    background: transparent url('../pharmacy.jpg') no-repeat;}

#message{margin-bottom:10px;float:top right;min-width:960px;
background: transparent url('../medecine.jpg')no-repeat;}

#login{float:bottom;*margin-bottom:-15px;}

my problem is i have an image in #header and another image in #message. i want both to be on the same level but one on the right and the other one on the left. the position of the image in #header is good. but in #message, it's not good. it's not on the same level.anyone can tell me how to solve this?

  • 2 Contributors
  • 3 Replies
  • 697 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by techyworld

Dani AI

Generated

Good calls from — the symptoms you describe come from a mix of invalid CSS values, floats wrapping when there is not enough horizontal room, and background-images that don’t show unless the element has size. Below is a short, practical set of fixes and two safe approaches (float-based and modern flexbox) you can paste into your stylesheet. Replace the example image paths with your real paths and check spelling/extensions.

Float-based (works in old browsers)

<div class="header-wrap">
  <div class="hdr"><h1>Site title</h1></div>
  <div class="subhead" aria-hidden="true"></div>
</div>
.header-wrap { overflow: auto; /* clears floats */ box-sizing: border-box; }

.hdr {
  float: left;
  width: 60%;
  min-height: 80px;                 /* ensures background is visible with no text */
  background: url('../images/header-img.jpg') left center no-repeat;
  background-size: contain;
}

.subhead {
  float: right;
  width: 40%;
  min-height: 80px;
  background: url('../images/subhead-img.jpg') right center no-repeat;
  background-size: contain;
}

Flexbox alternative (simpler vertical alignment)

.header-wrap { display: flex; align-items: center; justify-content: space-between; }
.hdr { flex: 0 0 60%; min-height: 80px; background: url('../images/header-img.jpg') left center / contain no-repeat; }
.subhead { flex: 0 0 40%; min-height: 80px; background: url('../images/subhead-img.jpg') right center / contain no-repeat; }

Short troubleshooting checklist

  • Fix invalid properties (there is no float: top and solid #999 is not a property — use border: 1px solid #999;).
  • Background URLs are relative to the CSS file location, not the JSP. Use DevTools Network tab to confirm the image loads (no 404).
  • If two floated elements don’t sit side-by-side, their combined width (plus padding/border/margin) exceeds the container; reduce widths or remove a min-width that forces wrapping.
  • To show a background with no text, give the element an explicit height or min-height, or place an <img> inside and style that image.

These changes address the layout and the “image not visible without text” issue while keeping the left/right placement consistent.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

There seems to be some property and value issues with your code above. For example, your #header starts with a sting of "solid #999". That isnt a property so what are you trying to do there? Also with the floats, i am familiar with the propert and the values of left and right. You are using top..I dont beleive that is a valid value for float. You've also added a min-width so be aware if there isnt enough room (assuming you used float properly), that the other div will move below, but to the right.

Member Avatar for techyworld

sorry the solid is not in the code. i forgot to remove it. i did not understand the min-width.can you explain it properly? thanks :)

Member Avatar for techyworld

I manage to make both image appearing. but i need to insert a text in the div tag subhead!!

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

#subHead{  width:40%; float:right; margin-bottom:10px; height:55px; 

background: transparent url('../images/medcine.jpg')  no-repeat;}





<%@ page language="java" isELIgnored="false" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<fmt:setBundle basename="bundles.application-resources"/>


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

    <div id="subHead"><h3>a</h3></div>

    <div id="login" style="width:100%"><jsp:include page="/WEB-INF/sitemesh-common/login.jsp" /></div>

I want the image to be displayed without entering text in the div tag!

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.