Icon/Image at start of Div - html

I'm trying to place an 17x17 px png image at the beginning of a centered div text like that:
[img] text text
text text text text text
text text text text text
<div style="text-align: center; height: 45px; width: 200px">
<img src="icon" />
<div>
Some longer text.
</div>
</div>
The "difficulty": The text must remain in the div and the div must not contain anything but the text. And the div also must stay a div, or at least must have a height property.
I tried a lot with css but it never works out how I need it. Thanks!
EDIT: The text inside the div is not necessarily long. It can also be just one word.

You can use the pseudo-element ::before to display your image inside your div:
#myDiv::before {
content: url('image.png');
}
Here's a working fiddle.

I think you need something along these lines:
A header to have the icon and the title centered
A section with the rest of the text
And that can easly be done with some lines of flex box. Something along these lines:
<header class="center-text">
<img src="https://forum.starmen.net/include/images/smilies/cool3.png" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, eum, debitis earum dignissimos nobis quos, nulla voluptates temporibus voluptatum ad repellat, nam dicta. Recusandae
ea quasi eligendi, nulla labore molestias.
</header>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint
voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor
ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita
nostrum ipsum sunt maiores obcaecati esse repellat tempore sed.
</section>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.center-text {
display: flex;
justify-content: center;
}
</style>

Related

How to have two inline divs on one line but make on expand responsively and push all the other content down

I want repeated rows of 2 divs. In each row one div will contain an image and the second will contain a description. I want each pair of divs to remain on the same line and aligned at the top always. But as the screen is shrunk, the second div will expand vertically to accomodate the text with less width. As this happens I would like all other rows of div-pairs to get pushed down so they remain aligned at the top also.
It seems so simple but I cant do it, an explanation of what I am missing and a solution would be fantastic.
Here's my code so far:
CSS:
<style>
.container{
width: auto;
height: auto;
border: solid 1px blueviolet;
}
.photo-box{
display: inline-block;
vertical-align: top;
width:150px;
height:150px;
border:solid 1px red;
}
.details-box{
display: inline-block;
vertical-align: top;
width:auto;
height:auto;
min-height:150px;
min-width: 100px;
border:solid 1px black;
}
</style>
HTML:
<html>
<div class="container">
<div class="photo-box"></div>
<div class="details-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.</p>
</div>
</div>
<br>
<div class="container">
<div class="photo-box">
</div>
<div class="details-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.</p>
</div>
</div>
</html>
This is what I am trying to achieve:
Here try this by making your widths 49%, makeing them flex boxes and floating left the photo box.
<style>
.container{
border: solid 1px blueviolet;
}
.photo-box{
display: flex;
vertical-align: top;
min-height:150px;
min-width: 100px;
border:solid 1px red;
width: 49%;
float: left;
}
.details-box{
display: flex;
vertical-align: top;
min-height:150px;
min-width: 100px;
border:solid 1px black;
width: 49%;
}
</style>
<html>
<div class="container">
<div class="photo-box"></div>
<div class="details-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.</p>
</div>
</div>
<br>
<div class="container">
<div class="photo-box">
</div>
<div class="details-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Earum veritatis suscipit beatae sed aut illum similique
porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum
quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
neque dignissimos nulla dolorem.</p>
</div>
</div>
</html>

Background color not applying

I'm new in web programming and I'm actually learning html and css and I have a problem applying background color in some parts of my web page.
Can someone help me to apply the background color in the header as I've done in my footer. Don't know why it is not working on the header.I've tried to set the same background color to the childs of the header but it is a dirt solution and does not look nice.
Thanks.
index.html
<header>
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search"
</form>
</div>
<div class="cart">
<img class="cartImg" src="images/cart.png" alt="cartImage">
</div>
</header>
<aside class="lateralMenu">
</aside>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
style.css
body {
margin: 0 0
}
header {
position: fixed;
width: 100%;
background-color: #CECDCC;
overflow: hidden;
}
.logo {
position: fixed;
width: 25%;
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:12%;
margin-top: 3%;
margin-left: 31%;
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
Everything inside the header is position: fixed, so it is taken out of normal flow.
Since there is nothing inside the header which is in normal flow, there is nothing to cause the header to have any height.
Since it is zero pixels tall, you can't see any background.
If you want the elements inside the header to be side-by-side, lay them out using flexbox instead of positioning.
You must set a height to the header
body {
margin: 0 0
}
header {
position: fixed;
width: 100%;
height:100px;;
background-color: #CECDCC;
overflow:hidden;
}
.logo {
position: fixed;
width: 25%;
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:12%;
margin-top: 3%;
margin-left: 31%;
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
<header>
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search"
</form>
</div>
<div class="cart">
<img class="cartImg" src="images/cart.png" alt="cartImage">
</div>
</header>
<aside class="lateralMenu">
</aside>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
Your problem solve .
body {
margin: 0 0 0 0 ;
}
header {
position: fixed;
width: 100%;
background-color: #CECDCC;
overflow: hidden;
height:10%;
}
.logo {
position: fixed;
width: 25%;
margin:0
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:20%;
float: right;
margin-right:10px;
/*margin-top:20px;*/
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
.logo{
background-image:url('https://picsum.photos/id/1011/300/30');
background-repeat: no-repeat;
color:white;
}
#inside-logo{
position: absolute;
}
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<header>
<div id="inside-logo">
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search">
</form>
</div>
<div class="cart">
<img class="cartImg" src="https://picsum.photos/id/1011/30/30" alt="cartImage">
</div>
</div>
</header>
<aside class="lateralMenu">
</aside>
<p>
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
</p>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
</body>
</html>

how to make the block continue from the new position

hello everyone i have an idea and I don't know how to do it.
second div have p who length is auto, and i want to auto wrap div
This can be achieved by setting some width to 'first-div' and setting 'float: left'. So that rest of the space is allocated to the 'second-div'. Check the sample css here. Let's say the first div has class 'first-div':
.first-div {
width: 300px;
float: left;
background-color: yellow;
}
See the working example:
div {
margin: 0 10px;
padding: 0 10px;
text-align: justify;
}
.border {
border: 1px solid #777;
}
.first-div {
width: 300px;
float: left;
background-color: yellow;
}
<div>
<div class="first-div border">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quis perferendis atque voluptatem iste non ex voluptatibus rem architecto laboriosam fugiat dolorum aspernatur nulla doloribus harum nostrum labore, id iure!
</div>
<div class="second-div">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quis perferendis atque voluptatem iste non ex voluptatibus rem architecto laboriosam fugiat dolorum aspernatur nulla doloribus harum nostrum labore, id iure! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quis perferendis atque voluptatem iste non ex voluptatibus rem architecto laboriosam fugiat dolorum aspernatur nulla doloribus harum nostrum labore, id iure!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quis perferendis atque voluptatem iste non ex voluptatibus rem architecto laboriosam fugiat dolorum aspernatur nulla doloribus harum nostrum labore, id iure!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quis perferendis atque voluptatem iste non ex voluptatibus rem architecto laboriosam fugiat dolorum aspernatur nulla doloribus harum nostrum labore, id iure!
</p>
</div>
</div>

Section Leak generating horizontal scroll

I'm trying to create a way to leak an element from it's parent container.
I'm using max-width and margin: auto for the container to center.
The child element has position: relative and uses left + translateX transform to become centered.
The CSS works OK until the page gets scrolling (content height higher than screen height).
This vertical scroll also generates horizontal scrolling.
I was able to hide it using overflow-x: hidden but i really want to know why i'm getting an horizontal scroll?
Maybe is because the transform? CODE BELOW (see in fullscreen):
.leaked {
position: relative;
left: 50%;
transform: translatex(-50%);
width: 100vw;
margin: 0;
overflow: hidden;
}
.container {
padding: 0 20px;
margin: 0 auto;
max-width: 960px;
position: relative;
}
/* EXTRA */
.block {
padding: 20px 0;
background: darkred;
color: white;
}
body {
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
text-align: center;
color: gray;
font-size: 0.8em;
}
.force-scroll {
height: 100vh;
}
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>
According to documentation
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they have scaled accordingly.
However, when the value of overflow on the root element is auto, any
scrollbars are assumed not to exist.
So there is no way to without js to get width without scrollbars :(
It's the width on .leaked. I changed the width from 100vw to 100% and the image reduces in size so it now fits in the container.
.leaked {
width: 100%;
//other styles
}
But if you do want the leaked content to go full width you need to change your html structure so .leaked sections are not inside the container, that way it will go full width:
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
</article>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<article class="container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
</article>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<article class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>

text-wrap semi working, need improvement

I don't know how to wrap all the text and not just one single line, If you have any idea how to change this I will gratefully thank you
http://jsfiddle.net/dkanem13/1/
<h1>I need to change this:</h1>
<div class="hi1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem perspiciatis similique eligendi quas quo reprehenderit ullam. Commodi repellendus distinctio similique voluptate sint debitis est eos minus eaque enim excepturi perspiciatis Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit impedit eveniet consequatur itaque ipsa hic est adipisci pariatur exercitationem mole Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius amet perferendis sint accusamus!stias mollitia debitis quae commodi ut a facilis alias dolorum doloribus!
</p>
</div>
<h1>to This:</h1>
<div class="hi2">
<p>Lorem ipsum dolor sit amet, consectetur adipisici Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ipsam eaque consequatur eligendi ullam soluta esse eius sapiente recusandae nostrum. ng Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis odio fuga nisi incidunt.elit. Aliquam expedita praesentium quo ratione? Nisi maxime reprehenderit debitis ex aspernatur itaque voluptate dicta neque vel eos quia repudiandae culpa harum bla bla bla cbla ullam...</p>
</div>
<h1>and this is what happend</h1>
<div class="hi3">
<p class="p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus expedita ex perspiciatis magni in architecto totam ut nam vel soluta deleniti rerum eos molestiae commodi laborum accusamus culpa? Porro corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia ex fuga quibusdam eius voluptates odio pariatur maiores ipsa saepe tempore autem facilis voluptatum dignissimos suscipit architecto iste! Enim adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ipsum est rerum quis consequatur nostrum possimus cupiditate dolor aspernatur modi numquam dolore culpa sunt iste ea voluptatibus doloremque accusamus reiciendis!.
</p>
</div>
div{
width:250px;
height: 250px;
background: yellow;
margin: 85px 15px;
}
.hi1{background: tomato;}
.hi2{background: royalblue;}
.p{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;}
white-space: nowrap is preventing it from going to the next line. In fact, that's exactly what it's intended to do.
http://www.w3schools.com/cssref/pr_text_white-space.asp
EDIT: If you want to make text not overflow, consider where you are adding that property. You want the container not to overflow, not the text. So add overflow: hidden or text-overflow: ellipsis to your div, not to the p tag.
http://www.w3schools.com/cssref/pr_pos_overflow.asp