In the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid View</title>
<style>
* {
box-sizing: border-box;
}
html {
font-size: 1vw;
}
body {
padding: 0 0;
margin: 0;
background-color: violet;
font-size: 1.1rem;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background-color: rgb(133, 76, 76);
border: .01rem solid rgb(133, 76, 76);
margin-bottom: 4%;
position: fixed;
top: 0;
left: 10%;
right: 10%;
padding: 0;
}
header h1 {
text-align: center;
}
.row {
background-color: blueviolet;
margin-bottom: 4%;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
background-color: whitesmoke;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
div#three div.col-3 {
width: 24%;
margin-right: 1.33%;
}
div#three div.col-3:last-of-type {
margin-right: 0;
}
#media only screen and (max-width: 780px) {
html {
font-size: 2.5vw;
}
body {
padding-top: 17%;
}
}
#media only screen and (max-width: 480px) {
html {
font-size: 3vw;
}
body {
padding-top: 17%;
}
}
</style>
</head>
<body>
<div class="container">
<div id="one" class="row">
<div class="col-12">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
<div id="three" class="row">
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
</div>
</body>
</html>
The web page breaks at around 470px (checked through device toolbar using chrome inspect). This happens as the text inside the 4 floated divs in the second row is not responsive and gets out of the div at 470px. This is only happening when the text is inside a floated element, when I make the divs block element again, the text becomes responsive.
Can someone tell me why this happens ?
Hope this help you. Added below mentioned CSS
div#three div.col-3{
width: 49%;
margin: 0 0.5%;
margin-bottom: 5px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid View</title>
<style>
* {
box-sizing: border-box;
}
html {
font-size: 1vw;
}
body {
padding: 0 0;
margin: 0;
background-color: violet;
font-size: 1.1rem;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background-color: rgb(133, 76, 76);
border: .01rem solid rgb(133, 76, 76);
margin-bottom: 4%;
position: fixed;
top: 0;
left: 10%;
right: 10%;
padding: 0;
}
header h1 {
text-align: center;
}
.row {
background-color: blueviolet;
margin-bottom: 4%;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
background-color: whitesmoke;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
div#three div.col-3 {
width: 24%;
margin-right: 1.33%;
}
div#three div.col-3:last-of-type {
margin-right: 0;
}
#media only screen and (max-width: 780px) {
html {
font-size: 2.5vw;
}
body {
padding-top: 17%;
}
div#three div.col-3 {
width: 49%;
margin: 0 0.5%;
margin-bottom: 5px;
}
}
#media only screen and (max-width: 480px) {
html {
font-size: 3vw;
}
body {
padding-top: 17%;
}
}
#media only screen and (max-width: 380px) {
div#three div.col-3 {
width: 99%;
margin: 0 0.5%;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="container">
<div id="one" class="row">
<div class="col-12">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
<div id="three" class="row">
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
</div>
</body>
</html>
A single CSS rule can fix this issue without altering breakpoints or existing source code -
div#three div.col-3{
overflow-wrap: break-word;
}
This does not take best practices in terms of readability for the end user into consideration but does fix the bug you're experiencing. Further tweaking with padding on .col-3 divs for mobile devices should help.
Changing the font-size to a 'vw' value of text inside floating elements resolves the issue. But i still can't figure out why.
Related
I'm trying to do an assignment, I couldn't solve it for 2 days.
flexbox, grid, bootstrap will not be used
in the first case,
Up to 992 pixels, 3 boxes will appear on the evenly spaced centered page.
in the second case,
In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself.
in the third case,
In the mobile view (equal to or less than 767px), each section should take up the entire row.
I couldn't get 3 boxes to appear centered on mobile.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Design</title>
<style>
* {
box-sizing: border-box;
}
#k1 {
background-color: blueviolet;
}
#k2 {
background-color: rgb(58, 245, 98);
}
#k3 {
background-color: rgb(179, 38, 38);
}
.column {
float: left;
width: 31%;
border: 2px solid black;
margin: 15px;
}
/* Clear floats after the columns */
.row {
clear: both;
}
.baslik1 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: palevioletred;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik2 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: red;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik3 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: rgb(217, 243, 166);
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
p {
clear: both;
padding: 10px;
}
#media only screen and (max-width: 992px) {
#k1 {
width: 29%;
}
#k2 {
width: 29%;
}
#k3 {
width: 29%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
#k1 {
width: 46%;
}
#k2 {
width: 46%;
}
#k3 {
width: 95%;
}
}
</style>
</head>
<body>
<h1>Three Column Design</h1>
<div class="row">
<div id="k1" class="column">
<div class="baslik1">Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k2" class="column">
<div class="baslik2">Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k3" class="column">
<div class="baslik3">Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
</div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Design</title>
<style>
* {
box-sizing: border-box;
}
#k1 {
background-color: blueviolet;
}
#k2 {
background-color: rgb(58, 245, 98);
}
#k3 {
background-color: rgb(179, 38, 38);
}
.column {
float: left;
width: 31%;
border: 2px solid black;
margin: 15px;
}
/* Clear floats after the columns */
.row {
clear: both;
}
.baslik1 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: palevioletred;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik2 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: red;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik3 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: rgb(217, 243, 166);
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
p {
clear: both;
padding: 10px;
}
#k1, #k2, #k3 {
width: 98%;
margin: 1%;
}
#media (min-width: 768px) and (max-width: 991px) {
#k1, #k2 {
width: 46%;
margin: 2%;
}
#k3 {
width: 96%;
margin: 2%;
}
}
#media only screen and (min-width: 991px) {
#k1, #k2, #k3 {
width: 29%;
margin: 2.16%;
}
}
</style>
</head>
<body>
<h1>Three Column Design</h1>
<div class="row">
<div id="k1" class="column">
<div class="baslik1">Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k2" class="column">
<div class="baslik2">Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k3" class="column">
<div class="baslik3">Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
</div>
</body>
</html>
#media (max-width: 767px) {
#k1, #k2, #k3 {
width: 95%;
}
Here's another version with no need for floats or the .row div as we've used display: inline-block. It's also an example of how to use calc to set widths. I've also tidied your CSS up a bit.
Good luck with your assignment!
*,
*::before,
*::after {
box-sizing: border-box;
}
#k1 {
background-color: blueviolet;
}
#k2 {
background-color: rgb(58, 245, 98);
}
#k3 {
background-color: rgb(179, 38, 38);
}
.column {
display: inline-block;
width: calc(31% - 15px);
border: 2px solid black;
margin: 15px;
}
.baslik {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik1 {
background-color: palevioletred;
}
.baslik2 {
background-color: red;
}
.baslik3 {
background-color: rgb(217, 243, 166);
}
p {
clear: both;
padding: 10px;
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
#k1,
#k2 {
width: calc(50% - 33px);
}
#k3 {
width: auto;
}
}
#media only screen and (max-width: 767px) {
#k1,
#k2,
#k3 {
width: auto;
}
}
<h1>Three Column Design</h1>
<div id="k1" class="column">
<div class="baslik baslik1">Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
<div id="k2" class="column">
<div class="baslik baslik2">Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
<div id="k3" class="column">
<div class="baslik baslik3">Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
When we set a block level element height to 100% it will take the full height min-height: 100%; of the page or at least the full height of its parent, however what is strange for me as I'm currently learning CSS is that when I shrink the height of the browser window
Here is a few seconds video to show what I mean. Video
As you can already see from the video, when I make the height of the browser very short and then scroll down I see that the content section no longer takes the full height until I make the browser height a little bit longer, however the sidebar and the profile sections don't do that since their width are a less than the content section.
So the question is: How to make the div to keep its full height when the browser height shrinks and then scroll down as you can see from the video?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 90%;
}
body {
position: relative;
overflow-y: scroll;
height: 100%;
}
h2 {
margin-bottom: 2em;
text-align: center;
}
p {
text-align: center;
}
.sidebar {
position: absolute;
width: 15%;
left: 0;
top: 0;
background-color: darkblue;
color: white;
padding: 2em;
margin: 2em;
min-height: 100%;
}
.content {
position: absolute;
width: 60%;
left: calc(15% + 2em);
top: 0;
background-color: green;
color: white;
padding: 2em;
margin: 2em;
min-height: 100%;
}
.profile {
position: absolute;
width: 15%;
top: 0;
left: calc(75% + 4em);
padding: 2em;
margin: 2em;
background-color: firebrick;
color: black;
min-height: 100%;
}
button {
display: block;
margin-top: 2em;
}
<div class="sidebar">
<h2>Sidebar</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="content">
<h2>Content</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="profile">
<h2>Profile</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
My code on codepen: Code
CSS-Grid solution
One easy way is to use CSS-Grid. I cut your code down to the part that is actually "usefull" and removed all unecessary or non-working code.
display: grid activates CSS-Grid
grid-template-columns: 15% auto 15% creates your 3 column layout while auto occupies the remaining space.
min-height: 100vh sizes the boxes to be at least as heigh as the viewport.
body {
display: grid;
grid-template-columns: 15% auto 15%;
grid-gap: 2em;
padding: 2em;
min-height: 100vh;
}
/* original CSS cut down */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2 {
margin-bottom: 2em;
text-align: center;
}
p {
text-align: center;
}
.sidebar,
.content,
.profile {
padding: 2em;
}
.sidebar {
background-color: darkblue;
color: white;
}
.content {
background-color: green;
color: white;
}
.profile {
background-color: firebrick;
color: black;
}
<div class="sidebar">
<h2>Sidebar</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="content">
<h2>Content</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="profile">
<h2>Profile</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
Flexbox solution:
To use Flexbox you have to use display: flex. Same as the CSS-Grid solution you also give the body a min-height: 100vh to fill up at least the entire viewport.
To get your intended 3 column layout, you have to define your left and right side as width: 15%.
To have the middle column fill up the remaining space, you just need to add: flex-grow: 1;
body {
display: flex;
gap: 2em;
padding: 2em;
min-height: 100vh;
}
.sidebar,
.profile {
width: 15%;
}
.content {
flex-grow: 1;
}
/* original CSS cut down */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2 {
margin-bottom: 2em;
text-align: center;
}
p {
text-align: center;
}
.sidebar,
.content,
.profile {
padding: 2em;
}
.sidebar {
background-color: darkblue;
color: white;
}
.content {
background-color: green;
color: white;
}
.profile {
background-color: firebrick;
color: black;
}
<div class="sidebar">
<h2>Sidebar</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="content">
<h2>Content</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
<div class="profile">
<h2>Profile</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, voluptatibus tenetur. Et facere provident voluptatem praesentium illum explicabo vel architecto eum repellat facilis. Eum repudiandae nobis ad aliquid aut. Ut.</p>
</div>
I have a problem with my footer. My footer is under the right section but I want that it will be under the main section on the full-width container.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #1F0057;
}
.container {
width: 1400px;
margin-left: 15%;
float: left;
}
nav ul li img {
width: 25px;
padding-left: 5%;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
vertical-align: middle;
padding-left: 5px;
color: #DAA520;
text-decoration: none;
text-transform: uppercase;
font-size: 1.2rem;
/* border: 1px solid yellow; */
}
nav {
background-color: #1F0057;
width: 100%;
height: 1em;
/* border: 1px solid yellow; */
}
.header {
font-size: 4rem;
color: white;
background-color: rgb(220, 189, 222);
width: 100%;
}
.title {
text-align: center;
color: #696969;
}
main article section {
float: left;
height: 60vh;
}
#first {
/* background-image: url(); */
background-image: url("gimp/cpu1.png");
/* usun "color" */
color: white;
width: 20%;
/* width: 300px; */
}
#second {
padding: 2%;
width: 60%;
height: auto;
background-color: #fff;
background-color: #4800CF;
/* width: 900px; */
}
#third {
width: 16%;
background-color: #5600F5;
height: auto;
/* width: 188px; */
}
main article section header {
font-size: 1.8em;
font-weight: bold;
padding: 2%;
}
main article section figure {
font-size: 1.2rem;
font-weight: bold;
margin-top: 3%;
box-shadow: 2px 2px 5px black;
}
main article section figcaption {
font-size: 1.1rem;
text-indent: 1.5em;
padding-top: 2.5%;
text-align: justify;
}
.secondmainmargin {
/* margin: 2%; */
}
.footer {
background-color: white;
font-family: 'Robocot';
font-size: 1.4rem;
text-align: center;
color: #fff;
float: right;
}
.link {
padding: 2%;
}
<div class="container">
<header class="header">
<div class="title">
Podstawowe podzespoły i parametry sprzętu komputerowego
</div>
<nav class="navbar">
<ul>
<li><img src="img/house.png" alt="domek"></li>
<li>Obudowa</li>
<!-- !!!!!przy "strony nie może być "/" czyli "/strony.obudowa.html"!!!!! -->
<li>Płyta główna</li>
<li>Procesor</li>
<li>Karty rozszerzeń</li>
<li>Pamięć Operacyjna</li>
<li>Pamięci masowe</li>
<li>Zasilacz</li>
<li>Inne</li>
</nav>
</header>
<main class="main">
<article>
<section id="first">
<img src="gimp/cpu1.png" alt="procesor" width="100%;">
</section>
<section id="second">
<header>
Nagłówek sekcji
</header>
<div class="secondmainmargin">
<figure>Podtytuł pierwszy</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore laborum explicabo beatae dignissimos consectetur, asperiores quod, culpa velit expedita vitae, id hic voluptatem soluta eius alias. Animi sequi deserunt dolorem incidunt iure laudantium
laborum nemo quia ullam blanditiis, voluptatem ea a odit quae, repellendus dicta consequuntur provident ab exercitationem itaque molestias, dolor. Et, ipsa, iusto. Deserunt labore provident ad adipisci sed aliquid natus nihil.
</figcaption>
<figure>Podtytuł drugi</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos modi laborum repudiandae error temporibus ullam consectetur in molestiae exercitationem quos, expedita cum, odit voluptatum quod illo vitae. Dolorum aperiam unde ducimus maxime aut
iusto distinctio ipsum nisi eveniet illo atque tempore, eius error ex, cupiditate! Provident doloribus voluptatibus dignissimos, sed!
</figcaption>
<figure>Podtytuł trzeci</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis ducimus beatae doloribus possimus fugiat iste aliquid, laudantium ab omnis veniam porro nemo explicabo. Inventore totam consequuntur expedita, distinctio exercitationem, eaque sint accusantium
libero voluptas sunt eligendi. Dolorum enim, consectetur perferendis veritatis impedit adipisci quo optio maiores odit accusantium tempora eaque blanditiis explicabo eligendi nam dolore placeat natus pariatur?dawdawdadawd Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Amet, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ipsa pariatur a, sequi provident id dolor cupiditate dolorum consectetur, ea aliquid sint nesciunt nobis perspiciatis vitae
deserunt, molestiae odit fugit. Tempore quae natus enim reprehenderit aspernatur ratione illo neque assumenda, beatae nihil, ipsa incidunt minima, qui? Delectus animi velit quam distinctio est rem, itaque tempore placeat odio tenetur ipsam
iure consequuntur ex dolorum nulla sunt provident quibusdam harum fugiat et. Ex praesentium sunt, est qui distinctio. Laboriosam quo molestias neque numquam autem suscipit impedit, quaerat optio dolores veritatis sint sequi dolorem necessitatibus
molestiae, ex, incidunt modi porro eius natus perspiciatis!
</figcaption>
</div>
</section>
<section id="third">
<div class="link">
<header>Linki</div>
</header>
</section>
</article>
</main>
<footer class="footer">
Made by: Filip
</footer>
</div>
code with css: https://codepen.io/FilipoV/pen/jOyyNxR
add this to your .footer-class:
.footer{
display:block;
clear:both;
}
and remove
float:right;
* {
box-sizing: border-box;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
div {
width: 100%;
}
p {
width: 90%;
height: 200%;
margin: 20px;
color: black;
padding: 10px;
}
#media (min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
position: relative;
border: 1px solid black;
margin: auto;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#heading {
position: absolute;
left: 358px;
top: 0;
background-color: #A52A2A;
width: 20.2%;
height: 12.2%;
text-align: center;
border: 1px solid black;
}
</style>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4">
<section id="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
</div>
I am trying to create a responsive webpapge:
I have 3 divs , I need each of them to have a heading at the top right corner. What I want to do is when I increase the width of the browser from 992px to full screen, the div size and position should change accordingly along with its headings.
I also need gaps between the divs, I have used relative and absolute positioning but that doesn't seem to work.
With my code, the heading doesnt resize when I change the browser width plus it also gets out of the div (see picture).
Please help!
P.s I have added heading on only the first div for checking purposes.
you have to set the parent div position to relative position:relative because the element with the absolute position always fallows the first parent that has the relative position
see your example here
You don't need to use position for the heading. You can use float. And one more thing you make the ID heading to class. Coz ID use for only unique identifier. SO make a class. Check your css section on media query I use for the gap .col-lg-4 { width: 32.33%; margin:5px; }
Just an instant answer for your question. Thanks, Any Question ask me in comment.
* {
box-sizing: border-box;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
p {
width: 90%;
margin: 20px;
color: black;
padding: 10px;
}
#media (min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
border: 1px solid black;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 32.33%;
margin:5px;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
.heading {
float:right;
background-color: #A52A2A;
width: 20.2%;
height: 12.2%;
text-align: center;
border: 1px solid black;
}
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4">
<section class="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<section class="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
<div class="col-lg-4">
<section class="heading">Heading</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
</div>
</div>
Ok, some points here about your header:
It's a header, so use <h1, h2, h3...> tags.
If it has absolute position, and you said to it to be 358px from left, it will be positioned exactly 358px from the left, so that is why is get out of the div.
To put the header on the right, I would use float: right instead.
Of course, adding floating to the header, you have to add floating to the text below.
If you use a width of 20%, it will not occupe the total (if you want the header to fit the entire parent's width, you have to use 100%.
Use media queries with #media (min-width: 992px) to make those changes you said to bigger resolutions.
Proposed solution
Inside media query, you only have to override those elements that you want to change (in your case, just the width).
The change we want is that when screen is bigger than 992px, the header's width be 100% so:
Here is the general CSS rule:
#heading {
background-color: #A52A2A;
border: 1px solid black;
float: right;
height: 12.2%;
position: relative;
text-align: center;
width: 20%;
}
And here we have an especific rule...
#media (min-width: 992px) {
#heading {
width: 100%;
}
}
Imagine you want to change also the background-color, all you have to do is to add the property inside the rule in the media query....
How can Ｉ make the same width of the NavWrapper as parent?
I want these links at a fixed position even the main section overflows.
I know how to do this without Flex. Is there any pure CSS way to do that?
body {
padding:0;
margin:0
}
.wrapper {
display: flex;
}
nav {
flex: 1 1 150px;
background: gray;
}
.nav-wrapper {
width: 100%;
position: fixed;
top: 0; left: 0;
display:flex;
flex-direction: column;
}
.nav-wrapper a {
flex: 1 1;
border: 1px solid red;
}
section {
flex: 5 1 500px;
padding: 20px;
}
<div class="wrapper">
<nav role="navigation">
<div class="nav-wrapper">
Home
About
</div>
</nav>
<section>
<p>Lorem</p>
</section>
</div>
You don't need fixed position- you can see why I say this after looking at the example below:
Remove the fixed positioning and add height: 100vh to nav:
nav {
flex: 1 1 150px;
background: gray;
height: 100vh;
}
Now wrap the contents on a section into an inner div that is positioned absolute like this:
section {
flex: 5 1 500px;
padding: 20px;
position: relative;
overflow-y: auto;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This will allow the section to remain at 100vh of the nav-wrapper and the extra height will overflow.
body {
padding: 0;
margin: 0
}
.wrapper {
display: flex;
}
nav {
flex: 1 1 150px;
background: gray;
height: 100vh;
}
.nav-wrapper {
width: 100%;
display: flex;
flex-direction: column;
}
.nav-wrapper a {
flex: 1 1;
border: 1px solid red;
}
section {
flex: 5 1 500px;
padding: 20px;
position: relative;
overflow-y: auto;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<nav role="navigation">
<div class="nav-wrapper">
Home
About
</div>
</nav>
<section>
<div class="inner">
<p>Lorem</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
<p>Lorem</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
<p>Lorem</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
</div>
</section>
</div>
Check this out and let me know your feedback. Thanks!