If you’re trapped in a page wrap - say all the contents of the page are in a div whose width is 900px, then you want one div WITHIN that that’s the full page width. What’s the easiest way to do this?
I know you can end the 900px div, do the full width div, and then start another 900px div, but is there a way to style the inner div so you don't have to escape it? 100vw works for making it the right size but doesn't position it in the right spot.
So simplistic example:
<div style="width:900px;margin-right:auto;margin-left:auto;display:block;">
<p>text text</p>
<div style="width:100vw;">
<p>I want this section to be the full page width and centered</p>
</div>
<p>text text</p>
</div>
Thanks!
You can use negative left margin (-50vw + half parent width).
body {margin: 0;}
#a {background: red;}
#b {background: green; margin-left: calc(-50vw + 200px)
<div id="a" style="width:400px;margin-right:auto;margin-left:auto;display:block;">
<p>text text</p>
<div style="width:100vw;" id="b">
<p>I want this section to be the full page width and centered</p>
</div>
<p>text text</p>
</div>
For this code example I've added IDs (for cleaner CSS styles) and change parent div to 400px (because there is smaller window).
I don't recommend trying to make a child div "escape" its parent because going with that approach will require pointlessly complicated CSS. You can accomplish what you want with a container div and a couple nested children which is a much simpler solution:
.narrow {
width: 300px;
margin: 0 auto;
background-color: tomato;
padding: 16px;
}
.full {
background-color: gold;
padding: 16px;
}
<div>
<div class="narrow">
<p>text text text</p>
</div>
<div class="full">
<p>more text or image or whatever</p>
</div>
<div class="narrow">
<p>text text text</p>
</div>
</div>
I would argue that the way you are trying to solve the issue is not very helpful for an actual website. Normally, you would have a container, your top div, which contains its lower elements. Making a child element go outside its parent div like you seem to want goes against that mentality.
Of course, sometimes you may want to put an element outside its parent, and you can use pavel's answer. For example, maybe you want to animate a line moving. You would then offset that element by -100% and then change that offset to give it the impression of movement. But that would be a special case.
To solve your problem, I would use the following structure:
Here is a link to the example too.
<div class='container'>
<div class='thin'>
<p>text text</p>
</div>
<div class='full-width'>
<p>I want this section to be the full page width and centered</p>
</div>
<div class='thin'>
<p>text text</p>
</div>
</div>
.container{
text-align:center;
padding: 0 5vw; //padding of 5vw to the left and right
}
.thin{
width:80vw;
margin: 0 auto;
background-color:yellow;
}
.full-width{
background-color:green;
}
Related
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
I've got a bunch of divs with background images like this:
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
...and so on (there are 20+ divs).
Each div has it's own background image.
Right now, on large screens I want to display 3 divs per line so I've got this:
#media screen and (min-width:768px) {
div {
width:33%;
}
}
What I would like is a 'gutter' that is 2ch wide between each div. When I use padding:2ch; it doesn't work (no space between divs) and when I use margin:2ch; then the 3rd div goes down to the next line (even with box-sizing:border-box).
What's the simplest solution to this? Here's an example of what I want the divs to look like (see each class image: http://www.platinumfitnessaz.com/classes/).
Thanks in advance.
Contrary to comments, percentage vs ch units has nothing to do with it. It's just the fact that you don't have enough room to fit things in a row.
If your page is 100% wide, then 3 divs in a row that are 33% wide will of course not leave any room for a margin. box-sizing only affects padding and borders, not margins, so that won't help you.
The solution is to use a calc() function.
If you want a 2ch space around your divs, use 2ch as the margin. Then, if you want three per row, you can use calc(33% - 2ch) to get the width of each one.
We only really need a right and bottom margin to achieve the effect you want:
div {
width: calc(33.333% - 2ch);
height: 150px;
float: left;
margin-bottom: 2ch;
margin-right: 2ch;
background-color: firebrick;
}
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
That's the simple version. It doesn't fully maximize our space, though, because there's a 2ch margin on the right of the third column of divs that could be reapportioned to the divs themselves.
To fully make use of all the space, we can do a little math to make our calc expressions a bit fancier, and then use nth-child to only apply the right margin to the divs in the first and second column:
div {
width: calc(calc(calc(calc(33.333% - 2ch) * 2) + 33.333%) / 3);
height: 150px;
float: left;
margin-bottom: 2ch;
background-color: firebrick;
}
div:nth-child(3n+1),
div:nth-child(3n+2) {
margin-right: 2ch;
}
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
The container's background-image should fit the navigator width, but the content should have a maximum width of 800px. So when I zoom out, the content does not spread along the navigator's width in an ugly form.
I want to know if this is possible just with my current html code, I do not want to add another tag in my html.
This is my code:
.container{
display:flex;
flex-wrap:no-wrap;
background-image: /* some huge image */
}
.container div{
flex:1;
}
<div class="container">
<div>
<h1>Section 1</h1>
<p>Some text</p>
</div>
<div>
<h1>Section 2</h1>
<p>Some text</p>
</div>
<div>
<h1>Section 3</h1>
<p>Some text</p>
</div>
</div>
Here is a CODEPEN with some cosmetics
Parent div: Navigation
Make a child div inside the parent, set the width on the child to be 800px.
Center (or wherever) the child div with margin: 0 auto;
Put content within child.
Edit: oops I guess that's what you didn't want to do, sorry.
You can set container max-width:800px; and margin:0 auto;
You would need 2 containers for your items.
Like
<div id="main-container">
<div class="container">
</div>
</div>
So you can set a max-width that contains the items but not affecting the width of the container with the background.
Here's your updated code
My problem is this. I have container and inside him i have 2 more containers one of the containers i use to put image and other container i use to put header and paragraphs. I want to make something like short preview of a news and i will have multiple copies of this containers with different images and different headers and paragraph and i don't want to always adjust the height of the parent container i want to automatically adjust his height. Can i do that with CSS and how ?
Here is example code
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src=" ">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
Here is CSS
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
The containers inside boxForNews are growing accordingly to the elements i put inside them but their parent do not grow accordingly to the grow of the 2 containers and my jumbotron gets broken because of this.
I Could give the first container some height but i the content i put inside the 2 containers inside him will always change and i will have to always play and change the height for every news i add.
First the errors in the code; You are missing an end quoation mark for the class attribute boxForImage, and the style rule .boxForImage ends with { instead of }.
The floating elements in the boxForNews div won't affect the height of their parent. You can make it contain its children by changing the overflow style:
.boxForImage{
width:33%;
float:left;
}
.boxForContent{
width:66%;
float:left;
}
.boxForNews {
overflow: hidden;
background: #eee;
}
<!-- First div is Bootstrap jumbotron -->
<div class="jumbotron">
<div class="boxForNews">
<div class="boxForImage">
<img src="http://placehold.it/100x100">
</div>
<div class="boxForContent">
<h3>Some Heading</h3>
<p>Random text Random text Random text Random text</p>
</div>
</div>
</div>
I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}
A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.