- This topic is empty.
August 26, 2014 at 10:20 am #180699jayg-7Participant
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.
Thank you!August 26, 2014 at 10:50 am #180700ThatCatParticipant
You could make an image of exactly how you want the containers?August 26, 2014 at 11:15 am #180708shaneismeParticipant
It’s a little messy in there…
I’m not sure if this will help you, but I made this simple example so you can mess with it and learn how to set it up (potentially).August 26, 2014 at 11:26 am #180711nixnerdParticipant
Here’s the deal:
Looks like you only have a
max-widthof 1140px on the actual elements… like
p, etc. The problem is… you need to set the CONTAINER to a
max-widthof 1140px. See, right now, no single text element is wider than 1140px. So, the rule isn’t being enforced. Looks like the container you need to look at is called
.site-inner. It’s got a
max-widthof 100%. Change that to 1140px.
Now, this might screw up your background tiles, as I don’t know what’s going on with them. But… the idea is that they are OUTSIDE the container (in the markup) and the text elements are INSIDE the container.August 26, 2014 at 11:42 am #180716jayg-7Participant
@Rocanrol97 heres a sketch: https://www.evernote.com/shard/s3/sh/f2f6fb65-0c25-4cf9-9b68-8479ae672c48/60d566d4bdcc696c28a04ab63285fcb4 Thank you! I hope this clarifies it.
@NIX I get the part about the site innner being 1140px, but we have an image in the middle of the page we want full width, going all the way to the edges. If I did that we couldn’t have that image in the middle going all the way to the edges.
I hope my sketch makes it cleared. Basically we want the page divided down the middle, separating two text boxes through out the page. But the total width of both text boxes together shouldn’t exceed 1140. But we still want two different bg colors no matter how large the screen gets, for moniters much wider than 1140, like the giant apple desktops.August 26, 2014 at 11:44 am #180718Paulie_DMember
Or just have full width ‘layers’ with an inner div set to the required width.August 26, 2014 at 12:02 pm #180723nixnerdParticipant
Or just have full width ‘layers’ with an inner div set to the required width.
Right. Just what Paulie said or put your full-width photo outside the wrapper in the markup. Nothing wrong with that. You can structure it in a variety of ways that all work.
What I generally do is have a wrapper that is a class and makes no assumptions about what’s in it. Therefore… I can wrap what I want and NOT WRAP what I don’t. That’s just one approach and I don’t always use it but it works well most of the time.
- The forum ‘CSS’ is closed to new topics and replies.