• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Div with just a single floated child - how to force the background image to be 100%

 
Sheriff
Posts: 10445
227
IntelliJ IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I've a HTML page which has a menu with a bunch of links. These menu items are expected to be on the right hand side of the menu and the entire menu itself is expected to be having a specific background image. Here's how the HTML looks like:



And the backing css:



In terms of layout, this shows up fine (see attached image). However, the height of the background image doesn't cover the menu items. In fact, from what I see in firebug, the height of that parent div is considered just 1 pixel.

Is there a way to ensure that the ul element is considered to be part of the div and at the same time float to the right have a background image which spans the breadth of the page?
menu.png
[Thumbnail for menu.png]
Floated menu
 
Jaikiran Pai
Sheriff
Posts: 10445
227
IntelliJ IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I tricked the browser into considering that ul element to be part of the div, by adding a dummy element with hidden visibility as a sibling of the ul:





This now shows up fine, however this doesn't really look like a good idea and I haven't fully thought of any potential layout problems with this hack.

Is there a different way out?

Edit: Attached an image to show how it looks now with this hack.

new-menu.png
[Thumbnail for new-menu.png]
New menu with a ugly hack
 
Rancher
Posts: 989
9
  • Likes 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Try adding to your menu. I'm guessing here that there is no height defined for the menu div, hence the behavior you are seeing.
 
Jaikiran Pai
Sheriff
Posts: 10445
227
IntelliJ IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

E Armitage wrote:Try adding to your menu.



Thanks!

That worked and makes sense too. I'll get rid of my ugly hack and use this instead. Thank you!
 
E Armitage
Rancher
Posts: 989
9
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You should refuse to make them torture you like this.
Surely they can punish you with bugs in undertow or some misbehavior in some corner case scenarios of weld in wildfly instead of all that web stuff?

Kind regards

EArmitage(<--washes mouth for posting css.
 
Jaikiran Pai
Sheriff
Posts: 10445
227
IntelliJ IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

E Armitage wrote:
Surely they can punish you with bugs in undertow or some misbehavior in some corner case scenarios of weld in wildfly instead of all that web stuff?


This is my hobby project which I play around in my spare time
 
author
Posts: 297
5
Android Firefox Browser Fedora
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The real answer here is not to float your ul, but if you're going to use floats you should understand: What is clearfix?
 
Greenhorn
Posts: 2
Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I agree with Rob, no float is a good float. clearfix is ugly, but works. It's the solution for nasty grid layouts (like grid960)

What you need to understand is that when you float an element, it removes it from the flow vertically. That is the parent element will not respect it's vertical height. It floats outside of it, hence your UL having a height of 0px, nothing is in it.

If you will not have dynamic content within the UL just explicitly set your dimensions as was already stated.
 
Chad Meyers
Greenhorn
Posts: 2
Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
another suggestion is drop the div.menu, and just use the ul.flr as your containing element, and set text-alignment: right;
 
reply
    Bookmark Topic Watch Topic
  • New Topic