Fit container to navigator width, but limit the content width - html

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

Related

Escaping a CSS column with a fixed width

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;
}

CSS Layout - best way to have a wrapper

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>

How to make my container grow accordingly to its containers inside him?

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>

Extend DIVs inside a div wrapper - fixed layout

I want to know how can I extend every DIVs inside a div wrapper. My div wrapper is fixed and has a width of 980px.
My HTML goes here:
<div id="wrapper" >
<div id="header" >
<strong>HEADER</strong>
</div>
<nav>
<strong>Navigation</strong>
</nav>
<div id="content" >
<div class="sidebar" >
<p>sidebar</p>
</div>
<div class="main-content" >
<p>content goes here.....</p>
</div>
</div>
<footer>
<strong>copyright etc....</strong>
</footer>
</div>
Here's the FIDDLE
What I want to achieve is every DIVs which hasbackground-color will expand and max-out the width of wrapper or something like filling the width of body to the fullest. But the content or texts must still has the width of 980px and is fixed. Thanks in advance.
Check this Demo
.div-inner {
width: 500px;
margin: 0 auto;
}

how to wrap an absolute div around 3 floating divs

Basically I have a container set to absolute positioning, for which I CAN'T set a width or height for... so it needs to wrap around the content automatically.
However, inside the absolute div, are 3 divs that are set to "float: left", so that they will stack up next to eachother.
Once I set the parent to be absolute positioned, the 3 inside divs jumps down, and the parent div, doesn't wrap around them.
Is it possible at all? So that I can wrap an absolute div, around 3 floating ones (next to one another)
apply overflow:hidden to parent div
Make sure you are using a clear element following your floats (withing your abs position div)
Here is the Fiddle for it
CSS:
.left{
float:left
}
.clearL{
height:1px;
margin-bottom:-1px;
clear:left;
}
#wrapper
{
padding:5px;
background-color:#e37c00;
}
​
HTML:
<div id="wrapper">
<div id="divOne" class="left">
<p>Some content goes here...</p>
</div>
<div id="divTwo" class="left">
<p>Some content goes here...</p>
</div>
<div id="divThree" class="left">
<p>Some content goes here...</p>
</div>
<div class="clearL">
</div>
<div/>
​
This will do the trick:
div.wrapper { /* outer-most div */
... /* other styles */
overflow:auto;
}
I use this often, works great inin all modern browsers.
Cheers