CODEWITHSUNDEEP
javascriptjquerycss
ivvi
ivvi

Reputation: 5310

Limit horizontal range of centered div when resizing window

I have two divs. One should be positioned 5% from the left window border, the other should be to the right of the previously mentioned div and centred relative to window width. If the window is made too narrow it should not overlap the first div, and it should not move below either.

Whatever comes after should be positioned below the tallest of the first two divs.

How can I do this?

The closest I've come is to use a float for the first div. http://jsfiddle.net/7qVLm/

edit: Here's the final result that I'm happy with: http://jsfiddle.net/ATHpg/

Thanks to both @Christopher Smithson and @gmebeh whose answers helped me to get to this solution.

Upvotes: 0

Views: 258

Answers (2)

user1108579
user1108579

Reputation: 2063

With percentage-based width's you can make this happen:

jsFiddle

  • #d1 is 5% from the left, center-aligned content
  • #d2 is centered relative to the browser window, and will never overlap #d1
  • Both use fixed heights to accomodate fixed amounts of content

Play around with the percentages to get the exact width you you want.

Upvotes: 1

C.S.
C.S.

Reputation: 422

Here's a fiddle to consider for your solution.

http://jsfiddle.net/f2Muj/5/

Upvotes: 1

Related Questions