[Webinar] Streamline your web hosting managementRegister Today

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 248
  • Last Modified:

How to arrange CSS Divs to float left and be relative Top to outer Div

I'm creating a weekly view of a calendar and need to have multiple inner divs in a column float left, but at the same time I need to set a top relative to the column and a height for each div.  See attached image for clarification.

The attached code is all absolute just to show what i need to achieve.
<div style="position:absolute; width:16%; top:5%; height:870px; background:blue;">
  <div style="position:absolute;background:gray; height:170.892857143px;top:0px; width:35%;">8:00AM - 11:00AM</div>
  <div style="position:absolute;background:white;left:35%; height:186.428571429px;top:31.0714285714px; width:35%;">8:30AM - 11:45AM</div>
  <div style="position:absolute;background:yellow;left:35%; height:77.6785714286px;top:248.571428571px; width:35%;">12:00PM - 1:30PM</div>
  <div style="position:absolute;background:yellow; height:77.6785714286px;top:248.571428571px; width:35%;">12:00PM - 1:30PM</div>
  <div style="position:absolute;background:yellow; height:62.1428571429px;top:792.321428571px; width:35%;  float:left;">8:45PM - 10:00PM</div>

Open in new window

1 Solution
bjv211Author Commented:
Oops, sorry about the ridiculous pixel amounts, i forgot to round.
Hi bjv211,
Positioning does not work with floats

You can set your parent element to position:relative, then all the child divs to position absolute, this way their position will be relative to their parent not to the document.


Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now