CODEWITHSUNDEEP
csscss-float
Doug Fir
Doug Fir

Reputation: 21212

Struggling to line up elements as expected using float

I'm adjusting a template on a CMS. ON the main page, particular elements I'd like to line up, from left to right, are (description: element name/id/class):

All nested under div "main-middle".

Rather than post a rather large chunk of html, here is a screen of the page structure from Inspect Element:

enter image description here

The primary confusion for me is that the How To Report box (currently at the bottom of the page), does not float along with the map and category filters, it remains below these elements. How to report box (div id="content") has a "foster" parent. It used to live under Category filters and I pulled it up a level to be a sibling with the two other elements mentioned.

I have tried fiddling with existing margins, float and nesting of the elements.

The link is here: http://tinyurl.com/lnrtfdo

The right column is where it should be and the map, which will be made thinner is where it should be (the middle). The How to Box below the map should be a left column so the top is in line with the top of the map (while the map will be thinner)

On the site right now the map is too large to float but if you adjust the width to say 300px, the element below, How To Report Box, does not move up it stays in place.

Here is the CURRENT CSS for each element. Adding float:right to each one does not solve:

The Category Filters:
div#right {
width: 285px;
padding: 0;
float: right;
}

The Map
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 19px;

The Stubborn How to Box that Won't Float
div#main .withright div#content {
margin: 0 325px 0 0;
padding: 0;

How do I get the how to box into the right place at the top left?

Upvotes: 0

Views: 370

Answers (1)

isherwood
isherwood

Reputation: 61063

Your "How to Report" section (.additional-content) is inside #content, which has a fixed width of 960px and has a clearfix class on it. I'm not sure why you'd expect it to float up next to #map, which is a sibling of #content. To float two elements adjacent to each other they must be siblings.

You need to back up a bit and rethink your layout in general. Consider using display: inline-block rather than floats, which can be problematic if you don't actually need float behavior.

Update: If you do all of these, you can get #map and #content to play nicely on one line:

  • Set #map to 600px wide or less and float it right (width: 580px and margin-right: 20px work well)
  • Remove the clearing divs immediately following #map and #mapStatus
  • Float #content left, set its width to auto, and remove its right margin

...

#map {
    float: right;
    width: 580px;
    margin-right: 20px !important; /* better, remove !important from elsewhere */
}
#content {
    float: left;
    width: auto;
    margin-right: 0 !important; /* better, remove !important from elsewhere */
}

Upvotes: 1

Related Questions