Min width issue:

[jgk]

Hi,

I'm not sure how to accomplish this on he following website, due to how nested div's are handled.

On the following page we have divs dividing the page down the middle with different background colors and text colors for design purposes. But throughout the site the max width is set to 1140px. Right now on very large screens the text in those divs are going out further than that.

I need the background to extend the full width but need the text to extend no further than 1140px. I'm not sure how to do this.

Please help! Thank you!

http://stewartmartin.studioissa.com/workshops/

[chrismcintosh]

As long as I am reading the issue correctly the following might be a good start.

HTML
Just inside your <div class="fifty purplebg split"> div

Add a another div. I did <div class="txt-widget">

Then do the same for <div class="fifty whitebg split">

CSS
.txt-widget {max-width: 570px;}

Seems like you will have to play around with padding/margins though.

[chrismcintosh]

Sorry this is little better.

CSS

.txt-widget {
max-width: 450px;
margin: 0 auto;
}

[jgk]

Thank you Chris! That fixed it! Thanks so much.

I'm having one tiny issue I didn't mention initially, here's a screenshot: https://www.evernote.com/shard/s3/sh/0f94fabb-7299-45df-b4b1-6005b201506b/961c91469093c66ad452187c0349cd4b

Basically at certain browser widths due to the size of the words one of the boxes is becoming larger than the other. This pushes down the enclosing div and makes a white line.

I know I can set the height of the boxes with media queries but would there be a simpler solution to avoid this?

Thanks so much!

[chrismcintosh]

At first look maybe a max-height declaration on that .txt-widget class. Might be able to take a closer look tomorrow.

[Author]

Posts