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>
Related
I'm doing the front-end on my website. I included a couple divs in my mark-up. which show on the live previewer server on vscode but when I open the very same in page in a browser these divs don't show and I don't know why cause I have not hidden them. I've set CSS but still not nothing. what's confusing is that it shows in the code editor but not on the browser.
.ad-2 {
position: relative;
top: 0px;
left: 0px;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-3 {
position: absolute;
top: 0px;
left: 0px;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-4 {
position: absolute;
top: 201px;
left: 0px;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-5 {
position: absolute;
top: 0px;
right: 0px;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-6 {
position: absolute;
top: 201px;
right: 0px;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="ad-1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus
voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis
pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="ad-2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="ad-3"></div>
<div class="ad-4"></div>
<div class="ad-5"></div>
<div class="ad-6"></div>
</div>
as you can see all the ad divs have css set on them but they visible on the browser. what could be causing this.
After playing with this for a while, it seems like Chrome actually interprets the class names (ex, ad-1) as something weird. Change the names of each class.
.number2
{
position: relative;
top: 0;
left: 0;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number3
{
position: absolute;
top: 0;
left: 0;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number4 {
position: absolute;
top: 201px;
left: 0;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number5
{
position: absolute;
top: 0;
right: 0;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number6
{
position: absolute;
top: 201px;
right: 0;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
<div class="paragraph">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div class="number1"></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div class="number2"></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div class="number3"></div>
<div class="number4"></div>
<div class="number5"></div>
<div class="number6"></div>
</div>
The ad- class name triggers adblocking extensions. Do you use an adblocker? If so, it's blocking the elements from rendering. You have two fixes:
Disable your adblocker
Obviously this is not a great solution, because anyone else with an adblocker will be unable to view those divs.
Rename them
As Matthew mentioned, changing the class name to something that doesn't get blocked by adblockers will work. The Chromium rendering engine (and by extension, Chrome) isn't the one disabling the divs, it's your adblocker.
I'm trying to make columns in HTML and css without using grids, flexbox or anything fancy. But the heights of individual columns appear to increase as they go from left to right and it also seems like the contents of the third column is taking up more space.
I've tried setting a specific height to the columns but they don't work as well.
#exhibit {
width: 100%;
height: 600px;
}
.col {
width: 33.3%;
font-size: 1.2em;
float: left;
font-family: sans-serif;
overflow: hidden;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
The three columns should have the same height and occupy equal space.
#exhibit {
height: 600px;
display: table;
width: 100%;
}
.col {
font-size: 1.2em;
font-family: sans-serif;
overflow: hidden;
display: table-cell;
background-color: red;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
You have to used display table type. but you will abled to achieved the .col all at same height
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>
I am trying to make the section element to start from 1px below the header element, so I set its top property as in the css code. I thought I was doing every thing correctly but it is still starting half way into the header element.
Any ideas? Thanks
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
Add position:relative in section top is not render without position
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
position:relative;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
remove top from the section and add the margin-top for it
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top:45px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
There are two things you need to do.
First: Give following css to remove default margin and padding of browser.
* {
margin: 0;
padding: 0;
}
Second: Give margin-top: 1px; to section instead of top.
Check how top works.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top: 1px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>
The reason for this is when the element is fixed, then it gets taken out of the "flow" of the document.
You can fix it with adding a margin-top to the section area and removing the top;
section {
margin-top: 40px;
background-color: red;
}
Hopefully this helps
You need to ensure that <section> is set to position: relative
Please see the following fiddle: https://jsfiddle.net/p741tbxx/
section {
top: calc(1.5em + 1px);
background-color: red;
position: relative;
}
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