[Webinar] Streamline your web hosting managementRegister Today

x
  • 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>
</div>

Open in new window

Divs.PNG
0
bjv211
Asked:
bjv211
1 Solution
 
bjv211Author Commented:
Oops, sorry about the ridiculous pixel amounts, i forgot to round.
0
 
remorinaCommented:
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.


0

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