Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

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

Avatar of bjv211
bjv211 asked on
2 Comments1 Solution280 ViewsLast Modified:
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>
Avatar of remorina
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answers