Is the following even possible with css? If not, what javascript events would be used even if the green box changes content?
I'd like to vertically position three boxes:
The first one (the green one) can have some variable amount of content, and the box should expand to fit the content. This box should be flush with the top of the browser.
The last one, the yellow one, will have a fixed amount of content (meaning I know what the content is at 'compile time'). This box should be flush with the bottom of the browser.
The middle one, the red one, will have a flexible amount of content, and should extend from the bottom of the green box to the top of the yellow box, and internally it needs to be scrollable if its content is larger than the box size.
This is what I've got so far, and it doesn't quite work - I can't seem to make the bottom of the yellow box flush with the bottom of the viewport in such a way as to let the red box take up all the extra space (i.e. position: absolute doesn't seem to help).
#container {
float: left;
height: 100%;
background-color:gray;
}
#header {
background-color: green;
}
#main {
overflow: auto;
background-color: red;
height: 70%;
}
#footer {
background-color:yellow;
}
<div id="container">
<div id="header">START OF HEADER CONTENT...</div>
<div id="main">Craft beer jean shorts...</div>
<div id="footer">footer some stuff goes here</div>
</div>
And this is what it looks like:
Here's a jsfiddle: https://jsfiddle.net/n6cmdcj3/, but note it might not help, as the html box doesn't obey the viewport size - not sure how to make it so
This can be done fairly easily with flexbox. Check out the support tables for compatibility.
html,
body {
width: 100%;
height: 100%;
}
#container {
float: left;
height: 100%;
background-color: purple;
position: relative;
display: flex;
flex-direction: column;
}
#header {
background-color: green;
}
#main {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background-color: red;
flex: 1;
flex-grow: 1;
}
#footer {
background-color:yellow;
}
<body>
<div id="container">
<div id="header">
START OF HEADER CONTENT and the viewer should be able to see all of it. Ipsum Blaster jango fett alderaan data dooku validium hypercube. Antilles mace windu uhura xindi millenium falcon bothan exterminate tylium ore. Endor maul skywalker everlasting matches antilles FTL tylium ore dooku. Paradox machine padawan speeder doctor who chewbacca AT-AT frack dagobah ice gun. Uhura data photon torpedo worf landspeeder starbuck hypercube cantina. END OF HEADER CONTENT
</div>
<div id="main">
Craft beer jean shorts beard green juice, kinfolk 8-bit hoodie single-origin coffee letterpress seitan four dollar toast hammock occupy selfies pug. Retro locavore meditation craft beer viral, vinyl health goth cred butcher echo park. Echo park portland helvetica roof party hammock, food truck messenger bag pop-up poutine master cleanse hella artisan etsy. Celiac polaroid before they sold out tousled chillwave farm-to-table, leggings craft beer mlkshk viral seitan vegan intelligentsia. Yuccie synth poutine next level food truck, meggings chambray aesthetic farm-to-table marfa helvetica dreamcatcher blue bottle mumblecore brunch. Fixie narwhal lomo, art party pinterest direct trade poutine mlkshk organic forage irony. Wolf kickstarter authentic dreamcatcher plaid.
Yuccie tilde try-hard selfies gentrify DIY. Offal celiac gentrify cornhole, chia beard scenester quinoa freegan marfa thundercats pour-over synth. Migas salvia franzen pabst, blog listicle freegan chia YOLO fashion axe locavore offal. Paleo whatever messenger bag, 3 wolf moon normcore aesthetic humblebrag pug narwhal lo-fi lomo lumbersexual. Chambray yuccie selfies, tattooed biodiesel pitchfork artisan mixtape actually iPhone single-origin coffee 8-bit master cleanse aesthetic. Kickstarter chillwave VHS tousled green juice. Meggings mumblecore gentrify chambray blue bottle brooklyn.
Four dollar toast sriracha hammock iPhone authentic, quinoa wayfarers pop-up taxidermy post-ironic next level offal YOLO chartreuse fingerstache. Forage salvia direct trade photo booth YOLO, fixie paleo sartorial deep v. Distillery art party pop-up meggings sartorial thundercats vice, portland jean shorts flannel readymade godard. 3 wolf moon single-origin coffee you probably haven't heard of them chillwave selfies cred. Scenester asymmetrical seitan blue bottle bitters banh mi swag, etsy disrupt 90's. Kombucha normcore echo park, photo booth bushwick stumptown retro before they sold out. Chillwave art party heirloom ugh.
Cliche authentic paleo fingerstache banjo actually artisan sriracha helvetica twee, trust fund portland PBR&B. Aesthetic pork belly pop-up bitters distillery, banh mi try-hard cred meditation letterpress schlitz 90's celiac neutra. Irony street art actually cliche cray asymmetrical. Bicycle rights kombucha beard crucifix, deep v cray 3 wolf moon listicle before they sold out shabby chic distillery pitchfork. Meh aesthetic tacos flannel, pug paleo DIY austin. Gastropub kinfolk cliche crucifix, swag post-ironic irony heirloom keytar thundercats 8-bit beard. You probably haven't heard of them migas marfa leggings normcore.
Four loko gentrify ramps, mixtape sartorial fashion axe ethical organic meditation williamsburg. Blue bottle freegan synth hoodie, swag bitters letterpress chillwave pop-up. Hella chicharrones next level ramps chillwave, portland freegan tattooed neutra disrupt austin 3 wolf moon kale chips roof party. Lumbersexual try-hard cold-pressed, affogato offal bushwick thundercats stumptown. Leggings knausgaard gastropub, raw denim bitters lo-fi four dollar toast tilde truffaut meh. Truffaut umami artisan, irony affogato tattooed literally yuccie pabst chia wolf hammock craft beer photo booth. Lomo roof party tumblr thundercats meggings ennui messenger bag, next level franzen synth kickstarter pork belly vegan.
</div>
<div id="footer">
footer some stuff goes here
</div>
</div>
</body>
#container {
float: left;
height: 100%;
background-color:gray;
position: relative;
}
#header {
background-color: green;
height: auto;
}
#main {
overflow: auto;
background-color: red;
height: 70%;
overflow-y: scroll
-webkit-overflow-y: scroll;
-moz-overflow-y: scroll;
}
#footer {
background-color:yellow;
height: 25px;
}
I would do it this way. No reason to get too complicated.
Link: https://jsfiddle.net/n6cmdcj3/3/
I would also utilize set pixels for the main id, since you are trying to establish a scrolling content div.
Correct me if I'm wrong but, I also believe these should be classes not id. Classes are for reusable names, for example, you would utilize a class to update all the color of the divs but you would not utilize an id. An ID would be used in the cases of you needing something specific that will not be implemented anywhere else on the site. It's just good programming practice and it pays out later on when you are using JavaScript.
ID = Single Change Element
Class = Reusable multiple Elements.
Josh Rutherford's answer is great for flexbox. If you want to use a more traditional layout, you will have to set the top element to a fixed height and use vh units. The CSS will look like this:
.container {
height: 100vh;
}
.top {
background-color: #f2f2f2;
height: 24vh;
overflow: hidden;
padding: 20px;
}
.middle {
background-color: #h2h2h2;
height: 55vh;
padding: 20px;
overflow-y: scroll;
}
.bottom {
background-color: #d2d2d2;
height: 3vh;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
Demo on CodePen: http://codepen.io/staypuftman/pen/eJvdYv
Related
I am going through a basic flexbox tutorial from MDN and cant get my head around on how is the remaining space divided amongst the flex item, when flex-basis is set.
In the live demo, I set the following code:
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
My browser screen is 1369px, after taking the scrollbar out I am left with 1349px. MDN says that
"Each flex item will first be given 200px of the available space. After that, the rest of the available space will be shared out according to the proportion units."
So the available space after min 200px is given to each article should be 1349px - 3*200px = 749px. Now, the article three should get half of the available space plus 200px, that is 200 + 749/2 = 575.5. Taking 10px margin space out from both sides we get 555.5px, but in my laptop it occupies 535.5px.
Below is the working demo:
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
flex: 1 200px;
}
/* Add your flexbox CSS below here */
section {
display: flex;
}
article:nth-of-type(3) {
flex: 2 200px;
}
<header>
<h1>Sample flexbox example</h1>
</header>
<section>
<article>
<h2>First article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Second article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Third article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
</section>
Please explain how is space divided amongst flex items when flex-basis and flex-grow both are set?
If I do article:nth-of-type(3) { flex: 2; } it doesn't give double space to article 3, why?
Margin should be considered initially and removed from the total width in order to calculate the free space. Not later, like you are doing.
So all your elements start with 200px width and 20px margin. The free sapce will be 1350px - 3*200px - 3*20x = 690px. Now, the article three should have a width equal to 2/4*690px + 200px = 545px (and not 555px)
without box-sizing you will have 1350px - 3*220px - 3*20x = 630px and the width will be 535px
In Markdown images are wrapped inside of paragraphs. I'd like images to be wider than text and fill the container's larger width. How can I solve this? Here is an example: https://sidey.now.sh/2019/08/31/difference-between-font-formats/
Ideally the text would only have a width of 40rem.
You can solve this using CSS grid:
.container {
margin:0 50px;
border:1px solid;
}
.container >p {
display:grid;
grid-template-columns:1fr minmax(0,20rem) 1fr;
}
/* this pseudo element will take the first column and force the text to be on the middle one */
p::before {
content:"";
}
/**/
p > img {
grid-column:1/span 3; /* the image should take all the 3 columns (full width) */
}
img {
max-width:100%;
}
<div class="container">
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
<p><img src="https://images.unsplash.com/photo-1580792214064-6102bf1948d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80" alt="image"></p>
<p>Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</p>
</div>
For instructional purposes, I'm working with the most basic of CSS. I have a navigation bar set to position: sticky which works great UNTIL it interacts with a set of floated columns further down the page.
gif of site scrolling and breaking nav
I'm unsure if it's because of the float, or some poor calculation regarding the simplicity of my layout. Right now, the 2-column layout is made with:
#main-menu {
width: 100%;
height: auto;
text-align: right;
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 2;
}
.column {
width: 50%;
float: left;
}
Using an inline-block display works and does not affect the sticky menu, but as expected I can not set them to 50% width. A fix would be great, but also an explanation on why I'm experiencing this.
Thank you!
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
Title
</div>
<div class="menu-item">
L1
</div>
<div class="menu-item">
L2
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>
The floated elements are no longer in the normal flow of the DOM, reducing the overall height of the body. Using inspector, you can see this (blue representing the height of the body):
Thus, as you encounter the floats, your position: sticky which is relative to the body, will appear to scroll.
A "fix" is to clear your floats. I applied the following clearfix to the body:
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Here's the snippet with demo:
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
Title
</div>
<div class="menu-item">
L1
</div>
<div class="menu-item">
L2
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>
I used a column-count to split the text into columns and assigned the display: inline-block; for child elements to exclude text wrapping inside blocks. As a result, there was a strange behavior when rendering, for some reason a large indent appeared after the block of columns. Is this a bug of chrome or am I doing something wrong? Are there any ways around this?
Chrome 63.0.3239.108, Linux Mint
PS: In Firefox everything works well
.container {
padding: 20px;
max-width: 1024px;
}
.columns {
margin: 0;
column-count: 2;
column-gap: 20px;
}
p {
margin: 0 0 1em;
line-height: 1.5;
display: inline-block;
}
<div class="container">
<div class="columns">
<p>Lorem ipsum dolor amet roof party mumblecore raw denim lyft paleo ennui. Tbh PBR&B mustache, cray palo santo adaptogen sustainable iceland echo park yr kinfolk before they sold out pinterest. Salvia semiotics before they sold out, pitchfork next level vape unicorn. Pinterest poutine lumbersexual seitan bespoke, crucifix skateboard intelligentsia ramps.</p>
<p>Small batch lo-fi celiac, chillwave fingerstache lumbersexual gochujang succulents. Pitchfork small batch cornhole plaid flannel mlkshk 8-bit blog squid trust fund keytar portland asymmetrical skateboard intelligentsia. Tumeric beard succulents art party, meggings chillwave swag hashtag gochujang coloring book direct trade leggings sriracha pok pok. Cornhole food truck schlitz, snackwave art party hot chicken microdosing kale chips disrupt church-key.</p>
<p>Unicorn asymmetrical actually lomo whatever typewriter fixie dreamcatcher vegan pabst everyday carry. Salvia next level hella vegan williamsburg pug. Pabst DIY chartreuse disrupt occupy. Cornhole crucifix PBR&B thundercats gochujang tacos fanny pack you probably haven't heard of them chillwave normcore kitsch wayfarers dreamcatcher man bun echo park. La croix normcore cronut prism fam knausgaard roof party blog kinfolk try-hard etsy raclette ugh quinoa. PBR&B kickstarter pabst jean shorts. 90's cray vexillologist pabst.</p>
</div>
<p>Sriracha actually crucifix snackwave try-hard fam twee tilde kitsch lo-fi af. Af freegan cliche portland. Distillery pop-up whatever affogato lyft chicharrones tacos snackwave. Art party single-origin coffee iPhone palo santo fam XOXO gochujang chambray leggings venmo neutra cold-pressed direct trade whatever. Shaman post-ironic aesthetic gochujang.</p>
</div>
You can use CSS properties, such as break-inside, to specify that content should not be spread over multiple columns.
.container {
padding: 20px;
max-width: 1024px;
}
.columns {
margin: 0 0 1em;
column-count: 2;
column-gap: 20px;
}
p {
margin: 0 0 1em;
line-height: 1.5;
-webkit-column-break-inside: avoid;
-moz-column-break-inside:avoid;
-moz-page-break-inside:avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
<div class="container">
<div class="columns">
<p>Lorem ipsum dolor amet roof party mumblecore raw denim lyft paleo ennui. Tbh PBR&B mustache, cray palo santo adaptogen sustainable iceland echo park yr kinfolk before they sold out pinterest. Salvia semiotics before they sold out, pitchfork next level vape unicorn. Pinterest poutine lumbersexual seitan bespoke, crucifix skateboard intelligentsia ramps.</p>
<p>Small batch lo-fi celiac, chillwave fingerstache lumbersexual gochujang succulents. Pitchfork small batch cornhole plaid flannel mlkshk 8-bit blog squid trust fund keytar portland asymmetrical skateboard intelligentsia. Tumeric beard succulents art party, meggings chillwave swag hashtag gochujang coloring book direct trade leggings sriracha pok pok. Cornhole food truck schlitz, snackwave art party hot chicken microdosing kale chips disrupt church-key.</p>
<p>Unicorn asymmetrical actually lomo whatever typewriter fixie dreamcatcher vegan pabst everyday carry. Salvia next level hella vegan williamsburg pug. Pabst DIY chartreuse disrupt occupy. Cornhole crucifix PBR&B thundercats gochujang tacos fanny pack you probably haven't heard of them chillwave normcore kitsch wayfarers dreamcatcher man bun echo park. La croix normcore cronut prism fam knausgaard roof party blog kinfolk try-hard etsy raclette ugh quinoa. PBR&B kickstarter pabst jean shorts. 90's cray vexillologist pabst.</p>
</div>
<p>Sriracha actually crucifix snackwave try-hard fam twee tilde kitsch lo-fi af. Af freegan cliche portland. Distillery pop-up whatever affogato lyft chicharrones tacos snackwave. Art party single-origin coffee iPhone palo santo fam XOXO gochujang chambray leggings venmo neutra cold-pressed direct trade whatever. Shaman post-ironic aesthetic gochujang.</p>
</div>
I am attempting to adjust all width sizes of inside the container. So all sides will be 80%. Why isn't the image adjusting as well? I'm expecting the image to not be so spread out to the right as it is now. I am expecting it to be aligned with everything else.
Here is the main HTML and CSS code attempting to do the above:
.container {
width: 80%;
margin: 0 auto;
}
<div class="container">
<div class="header">
<h1>About me </h1>
</div>
<div class="image">
<img src="http://lorempixel.com/1400/300" />
</div>
<div class="intro column">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="skills column">
<ul id="skill-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="main_text">
<p>
Small batch wolf pug bicycle rights, letterpress kitsch Etsy listicle farm-to-table. Hoodie flannel Pitchfork normcore chambray, polaroid viral before they sold out. Wes Anderson skateboard single-origin coffee fixie shabby chic pour-over, four loko typewriter. Banksy American Apparel sartorial, irony XOXO plaid narwhal cred mumblecore keffiyeh asymmetrical sriracha. Marfa PBR lomo four loko aesthetic master cleanse, Pitchfork church-key bitters sartorial beard keffiyeh Thundercats. Mixtape aesthetic mustache readymade Blue Bottle, Banksy Wes Anderson Intelligentsia Kickstarter cliche biodiesel normcore farm-to-table polaroid narwhal. Semiotics mixtape Portland kale chips, heirloom Carles seitan pickled 3 wolf moon church-key master cleanse fingerstache.
</p>
<p>
Tofu pork belly pug Tumblr crucifix. XOXO 3 wolf moon whatever, narwhal Vice Blue Bottle distillery PBR&B lumbersexual forage tattooed leggings 90's letterpress. Brooklyn pork belly umami hashtag gentrify tilde. Blog pork belly Godard mlkshk. Kitsch letterpress kale chips narwhal messenger bag. Migas farm-to-table banjo hella. Taxidermy lo-fi mlkshk normcore paleo DIY, tofu VHS lumbersexual ugh listicle.
</p>
</div>
</div> <!-- end container -->
Images with no style on them automatically default to their true size (ex. a 1400px by 300px image will be 1400px by 300px on the screen), as #MrLister said in his comment. You could do something like this:
img {
width: 100%;
}
to set the image width to 100% of its parent's width.
Width property isn't inherited. so the width of the container is 80% of its parent (the body element). but the width of the image is its true size.
To change its width add a css style.
img{
width: 100%;
}
this changes its width to 100% of its parent (the container).
*performance note: It's better to change the size of the picture itself rather than use the width property because you download the whole picture then resize it which means useless data download.