How can I wrap content around a UL CSS Menu so content is seamless?


Tags: css,menu,wrap

Problem :

Thanks for your help

Here's the finished code for IE, Firefox, Safari and Chrome: http://jsbin.com/eyoda4


I created a simple CSS UL drop down menu, so when a user hovers over the designated link, a menu will drop down for the user to select an option.

The issue I'm having is I'd like the content to wrap around the UL menu so the UL appears seamless/flush within the content without breaks in content.

This is a demo of the issue and my code. As you can see the content doesn't wrap around the UL.
DEMO: http://jsbin.com/uzidu4/

This demo is a visual of how I'd like the content to wrap around the menu.
Note: This example won't work, because no UL is present in this example - This is just a visual
Demo: http://jsbin.com/uzidu4/2/

Thank you for your help!



Solution :

(answering only your update here)

To make it work in IE7, you can add this:

<!--[if IE 7]>
<style>
.inline-list, ul.program-menu li {
  display: inline;
  zoom: 1
}
</style>
<![endif]-->

I also recommend adding this to stop the annoying text jump when you hover over the drop down:

ul.program-menu li {
    position : relative;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff
}

(I tried transparent, but it screwed up the menu slightly in IE7)

http://jsbin.com/uzidu4/21


    CSS Howto..

    How to add border in my clip-path: polygon(); CSS style

    How to make search bar responsive using CSS

    How to include CSS file in Hippo CMS?

    Avoid the height change of a container + how to position a list item at end

    How to position one element relative to a separate element in CSS

    How to make a responsive mosaic css fullscreen width

    How to change the color of an active h5 tab using jQuery or CSS

    Give a box an ID, once clicked shows alert of that ID?

    CSS - How to hide div by hovering another div [duplicate]

    How make frameset resize appropriately with jstree context menu

    How to remove simple text from HTML/HAML

    How do I keep text from wrapping under an element which floats to its left?

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How can I apply css to elements created with append()

    How to apply CSS selector on Select Option Child

    How to put a list of images in a fixed div

    CSS: How to prevent Background colour to be overwritten by colour from less-file

    How to insert variables in inline CSS rules with pure JavaScript?

    How to tooltip keep active using HTML and CSS or Jquery?

    How to achieve “paper-like” background effect? [closed]

    How to draw half-opened line in CSS? [closed]

    How to realize a gradient like this with css

    How to Convert this Inline CSS to External CSS using just a single class?

    How large can CSS values be?

    How to justify short text inside fill fixed width parent with CSS?

    How to force child element adherence to `flex: nowrap;` CSS directives

    How to create a button to every list item which opens a menu over it?

    How to use cross domain dynamically generated CSS

    How to change font color of select2 control using css

    how to make a custom scroll bar with css