Grow your CSS skills. Land your dream job.

Issue placing three-divs; third div somehow affects whole page

  • # March 3, 2013 at 3:50 pm

    I have three divs in a row which will ultimately contain three, “widgets,” (calendar, YouTube playlist, and an audio podcast). When I apply a width of 30% to the first two DIVs everything works, but when I apply any width to the third DIV it causes the whole page to shift left, (absolute position left:0). Also, any padding added to the DIVs contained within .widgets seems to affect the page. Why are these DIVs, the third in particular, causing so much trouble? and how should I go about achieving the design I have on paper, (in the SkyDrive link)?

    [JSFiddle for the results…](http://jsfiddle.net/xMNrW/4/embedded/result/ “JSFiddle for the results”)
    [JSFiddle for the code…](http://jsfiddle.net/xMNrW/4/ “JSFiddle for the Code”)
    [SkyDrive folder for screenshots and wireframe](http://sdrv.ms/13yCE82 “SkyDrive folder for screenshots of results”)

    # March 3, 2013 at 4:49 pm

    When I added widths to each of the elements as you specified I had no problems. Can you link to an example where the issue is occurring?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".