I'm fairly new to html and css and I have a trouble with understanding of the layout. Here is an example which I have created to show my problem.
What I would expect is for #bottom to be inside the #page but it is below it. Additionally the div #else which I would thought should be below the #page is in the same space as the #bottom.
Could you please help me understand what I'm doing wrong here?
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#page {
margin: 0 auto;
width: 90vw;
border: 3px solid black;
}
#main {
display: block;
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
float: left;
margin: 0 auto;
height: 4vh;
width: 90vw;
border: 1px solid green;
}
#else {
height: 10vh;
width: 90vw;
background-color: red;
margin: 0 auto;
}
<div id="page">
<header>
</header>
<div id="main">
</div>
<div id="side">
</div>
<div id="bottom">
</div>
</div>
<div id="else">
</div>
I don't get why did you put this float:left in your footer.If you remove it everything should work fine
#bottom {
margin: 0 auto;
height: 4vh;
width: 90vw;
border: 1px solid green;
}
Remove float left from #bottom
#bottom {
background-color:green;
margin: 0 auto;
height:50px;
width:100px;
border: 1px solid green;
}
here is the link: https://codepen.io/Dholu_Effect/pen/PoqByQa?editors=1100
Also I would sugges you to use Flex-box, it will make things much easier.
<body>
<div id="page">
<header>Header</header>
<div id="main">Main</div>
<div id="side">Side</div>
<div id="bottom">Bottom</div>
</div>
<div id="else">Else</div>
</body>
And the css
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#page {
margin: 0 auto;
width: 90vw;
border: 3px solid black;
}
#main {
display: block;
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
margin: 0 auto;
height: 4vh;
width: 90vw;
border: 1px solid green;
background-color:#ddd;
}
#else {
height: 10vh;
width: 90vw;
background-color: red;
margin: 0 auto;
}
https://codepen.io/erwinagpasa/pen/ZEGjqjY
I think you can see this
header {
display: block;
margin: 0px auto;
height: 20vh;
width: 90vw;
background-color: #011a2f
}
#page {
margin: 0 auto;
width: 90vw;
}
#main {
float: left;
height: 60vh;
width: 67.5vw;
background-color: #323232
}
#side {
overflow: hidden;
margin-left: 2px;
height: 60vh;
width: 22.5vw;
background-color: #ff1e56;
}
#bottom {
height: 5vh;
width: 90vw;
background-color: #000000;
}
#else {
height: 10vh;
width: 90vw;
background-color: #ffac41;
margin: 0 auto;
}
<div id="page">
<header></header>
<div id="main"></div>
<div id="side"></div>
<div id="bottom"></div>
</div>
<div id="else"></div>
This is the closest i can do for you to understand it in your beginner level
*{
box-sizing:border-box; /* this will let the border/padding be included in the elements size */
}
#page {
margin: 0 auto;
width: 90%;
border: 3px solid black;
}
header {
display: inline-block;
margin: 0 10%;
height: 20vh;
width: 80%;/* changed to percentage which is more logic to follow its parent not the viewport width */
border: 1px solid green;
}
#main {
display: inline-block;
height: 60vh;
width: 67.5%;
border: 1px solid green;
margin:0;
margin-left:5%;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: calc(22.5% - 6px);/* 2 for the margin left, 4 for the borders*/
border: 1px solid green;
}
#bottom {
/*float: left;*/
margin: 0 auto;
height: 4vh;
width: 90%; /* percentage */
border: 1px solid green;
}
#else {
height: 10vh;
width: 90%;
background-color: red;
margin: 0 auto;
}
<div id="page">
<header>
</header>
<div id="main">
</div>
<div id="side">
</div>
<div id="bottom">
</div>
</div>
<div id="else">
</div>
I just made few adjustments in your code, I hope that is fine with you:
Note: View in full screen mode for more clarity.
#page {
margin: 0 auto;
width: 90vw;
border: 1px solid black;
}
header {
display: absolute;
margin: 0px auto;
height: 20vh;
width: 80vw;
border: 1px solid green;
}
#main {
float: left;
height: 60vh;
width: 67.5vw;
border: 1px solid green;
}
#side {
display: inline-block;
margin-left: 2px;
height: 60vh;
width: 21.5vw;
border: 1px solid green;
}
#bottom {
height: 4vh;
width: 90vw;
border: 1px solid green;
background-color:green;
}
#else {
height: 10vh;
width: 90vw;
background-color: pink;
margin: 0 auto;
}
<div id="page">
<header>header
</header>
<div id="main">main
</div>
<div id="side">side
</div>
<div id="bottom">bottom
</div>
</div>
<div id="else">else
</div>
My recommendation is that you use flexbox. Here is a quick responsive design I did with HTML5 selectors. Since you're new to HTML/CSS, I would suggest you start learning this way and avoid so many div classes, as that doesn't work that great with accessibility, which is a huge issue in today's development world.
And here is a codepen you can play with.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
font-family: 'Roboto', sans-serif;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
background: darkgray;
}
header {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
background: #ccc;
}
header h1 {
font-size: 4rem;
font-weight: 300;
}
main {
display: flex;
}
article {
width: 70%;
justify-content: flex-start;
padding: 0.5rem;
}
aside {
width: 30%;
justify-content: flex-end;
padding: 0.5rem;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
#media (max-width: 600px) {
main {
flex-direction: column;
}
main > article, aside {
width: 100%;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
footer {
background: #333333;
color: white;
margin: 0;
text-align: center;
}
<div class="content">
<header>
<h1>Header</h1>
</header>
<main>
<article>
<h3>Current Article</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit vero quibusdam maxime magnam rerum nemo provident? Commodi, non! Ad facilis, doloribus voluptatum alias nostrum voluptatibus enim libero, distinctio nam sunt similique pariatur nesciunt accusantium eveniet perferendis ea doloremque molestiae culpa consequuntur quia aspernatur, itaque voluptate? Voluptatem magni delectus harum totam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga rerum repudiandae error eveniet est explicabo, nihil eum. Inventore laboriosam consectetur dolor consequatur. Unde in doloribus repellendus dolorum perferendis officia hic?</p>
<p>Dicta molestias doloremque, corrupti dolorum ipsum ea perferendis neque a, animi magnam ab sint impedit repudiandae aspernatur vel natus cum suscipit vero nisi nihil blanditiis iste laborum. Eum, sunt quo!</p>
<ul>
<li>Lorem ipsum dolor sit.</li>
<li>Nisi doloremque ut deserunt?</li>
<li>Impedit aliquam itaque placeat.</li>
<li>Sit incidunt iure assumenda.</li>
<li>Inventore fuga optio perferendis!</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus illum aut quia alias delectus labore, maiores, excepturi quae nisi a non consequuntur! Officia fugiat enim nostrum molestias ipsa! Deleniti, repudiandae!</p>
<p>Illo, reprehenderit? Ipsum velit aut, ducimus minima in accusamus aperiam ex cumque recusandae tenetur architecto nemo repellat asperiores eum. Corrupti blanditiis, odio sequi ea ducimus ipsam temporibus culpa asperiores dicta.</p>
<p>Maxime alias, natus veritatis quis mollitia itaque voluptate iure neque dolore, expedita eaque, in ea sunt quibusdam ut ducimus fugit doloribus! Corporis molestiae nobis quae nesciunt inventore alias sed error.</p>
<p>Id est repellendus pariatur harum, hic sequi vero ab mollitia corporis nisi, consequuntur eaque doloremque, suscipit nobis velit dolore totam exercitationem facere voluptas iure? Temporibus eius minus vero aut cumque!</p>
</article>
<aside>
<h4>In other news:</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, culpa.</p>
<p>Molestiae, officiis non esse perspiciatis provident a doloribus dignissimos sint!</p>
<p>Inventore nihil illum maxime ipsa repudiandae quia omnis quae consequuntur!</p>
</aside>
</main>
</div>
<footer class="footer">
Company Name | All rights reserved ©2020
</footer>
Related
I made a table with divs, I want to use (summary, details), but when I click on show I want the text to start from the left side under "lala". Please help
Hey, I made a table with divs, I want to use (summary, details), but when I click on show I want the text to start from the left side under "lala". Please help
<div class="div-table dd">
<div class="div-table-row">
<div class="div-table-col">Title</div>
<div class="div-table-col y">Description</div>
<div class="div-table-col"></div>
</div>
<div class="div-table-row">
<div class="div-table-col">lala</div>
<div class="div-table-col x">yy</div>
<details>
<summary></summary>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis id fugit dolorum voluptates saepe, numquam labore quae quia! Laboriosam at natus explicabo minima voluptatibus eligendi neque eum voluptatum aut! Officiis nostrum magni officia minus facilis omnis facere numquam sint porro, nobis aperiam odio commodi, veritatis consequatur, architecto illo accusamus sequi.s</div>
</details>
</div>
</div>
.div-table {
display: table;
width: 90vw;
border: 1px solid #666666;
border-spacing: 5px;
}
.div-table-row {
display: flex;
justify-content: space-between;
margin: 10px;
padding: 10px;
width: auto;
background-color: #ccc;
clear: both;
}
.div-table-col {
float: left;
display: table-column;
width: 33%;
}
.x{
width: 100%;
}
.y{
width: 33%;
}
details{
text-align: right;
}
summary{
padding: 0;
text-align: right;
}
details>summary {
white-space: nowrap;
list-style: none;
}
summary::-webkit-details-marker {
display: none
}
summary::after {
content: 'show ▼';
color: #007bff;
}
details[open] summary:after {
content: "hidden ▲";
}
https://codepen.io/olivier-mazur/pen/XWYdKVw
I'm still a rookie, trying to learn HTML and CSS. I'm trying to use 1fr 1fr grid for my "welcome" section. Idea is to put an image on the left side, and text on the right side.
When i go to Inspect and try to see it in Responsive mode, my grid colapses when width goes below 1300, or when height goes below 900.
This is my first section after header, so my question is how should I handle this situation? I don't want to build entire page like this and then realize that I need hundreds of lines of media queries because I used the wrong concept from the beginning :)
I'm trying to get something like this: Example
Below is my code:
.welcome {
padding: 7em 0;
display: flex;
justify-content: center;
}
.welcome-container {
display: grid;
justify-content: center;
align-content: stretch;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
background-color: white;
height: 50vh;
width: 50vw;
overflow: hidden;
}
.welcome-left {
padding: 3em;
border: 1px blue solid;
text-align: center;
}
.welcome-img {
background-image: url(../../img/tetiana-padurets-B-xb7VFtlZg-unsplash.jpg);
width: 100%;
height: 100%;
}
.img {
display: block;
}
.welcome-right {
border: 1px red solid;
padding: 5em 3em;
}
.welcome-title {
text-align: center;
color: #3f3f3f;
font-weight: 400;
margin-top: 1em;
}
<section class="welcome">
<div class="welcome-container">
<div class="welcome-left">
<div class="welcome-img"></div>
</div>
<div class="welcome-right">
<h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
<p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores.
</p>
</div>
</div>
</section>
Cheers!
<section class="welcome">
<div class="welcome-container">
<div class="welcome-left">
<div class="welcome-img">
<img class="image" src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U">
</div>
</div>
<div class="welcome-right">
<h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
<p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores.
</p>
</div>
</div>
</section>
In CSS
.welcome {
display: flex;
justify-content: center;
width: 100%;
}
.welcome-container {
display: grid;
justify-content: center;
align-content: stretch;
grid-template-columns: 1fr 1fr;
background-color: white;
width: 50vw;
}
.welcome-left {
padding: 10px;
border: 1px blue solid;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 100%;
height: auto;
}
.img {
display: block;
}
.welcome-right {
border: 1px red solid;
padding: 10px;
}
.welcome-title {
text-align: center;
color: #3f3f3f;
font-weight: 400;
font-size: 2vw;
margin-top: 1em;
}
.welcome-desc {
font-size: 1vw;
}
.welcome-img {
width: 100%;
}
I guess you want something like this.
I'm trying to show message within a div with icon on the left.
Expected result is icon should always adjacent to text and together they need to be aligned at bottom-center of div.
I'm using :after pseudo element. Keeping position: absolute of icon didn't help since that needs manually adjusting the icon position relative to text.
Here is the CSS.
.parent{
font-weight: 500;
height: 65px;
text-align: center;
padding: 15px 0 10px;
margin: auto;
display: block;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.parent > div {
float: none;
/* display: table-cell; */
vertical-align: middle;
position: absolute;
bottom: 0;
width: 100%;
}
.msg:after {
content: '';
background: url(data:image/...);
height: 16px;
width: 16px;
display: block;
position: absolute;
top: 0;
padding-right: 5px;
left: 108px;
}
And markup:
<div class="parent">
<div class="msg">text goes here</div>
</div>
Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.parent {
font-weight: 500;
margin: auto;
padding: 1em;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
border: 1px solid red;
}
.msg {
display: flex;
}
.msg p {
padding-left: 1em;
}
.msg:before {
content: "";
height: 16px;
flex: 0 0 16px;
background: red;
border-radius: 100%;
}
<div class="parent">
<div class="msg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae numquam unde, eum sequi expedita fugiat ipsa exercitationem nesciunt libero repellendus aperiam excepturi, dolorem repudiandae eveniet alias perspiciatis, vero veniam tempora natus magnam
itaque quos. Nemo sit nisi, veniam mollitia fugit eaque reiciendis ex doloribus rem et suscipit debitis commodi sapiente.</p>
</div>
</div>
I'm trying to get the #bigimage and #textarea elements to sit closer together, but then still be centered when laid out as col-12 on a small screen.
Should I use a media query for this? I've tried putting them in a separate container, but strange stuff starts happening when I test that on a small screen.
The colored borders in my attempt below are for my own clarity. I'm just a beginner so if you have any other comments about my code I'd really appreciate it.
header {
border: 3px solid red;
text-align: center;
margin-top: 30px;
}
li {
display: inline;
text-align: center;
padding: 3%;
}
img {
width: 300px;
}
ul {
border: 2px solid green;
margin-bottom: 20px;
margin-top: 40px;
}
h2 {
border: 2px solid yellow;
margin-top: 30px;
}
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 30px;
width: 200px;
}
#bigimage {
border: 3px solid green;
text-align: center;
}
p {
border: 2px solid red;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 300px;
margin: 0 auto;
}
#mainstuff {
width: 50% margin: 0 auto;
border: 3px solid yellow;
}
.container {
border: 5px solid blue;
}
.row {
margin-top: 30px;
position: relative;
}
img {
border: 2px solid red;
}
#textandphoto {
width: 800px;
}
#media (min-width: 1500px) {
.container {
max-width: 900px;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<header>
<h1>Raphael Hetherington</h1>
<h2>11+ Tutor</h2>
<ul>
<li>About Me</li>
<li>11+ Tuition</li>
<li>Programming</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<div class="row" id="mainstuff">
<div class="col-12 col-md-6" id="bigimage">
<img src="//lorempixel.com/400/200/abstract/5/" alt="">
</div>
<div class="col-12 col-md-6" id="textarea">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum omnis harum nesciunt repellendus laudantium quam quo ea, placeat, totam rem laboriosam vero, asperiores architecto. Dolores earum, architecto nemo molestiae quo. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Corporis accusamus modi eaque placeat voluptates nihil quasi non et similique magnam architecto itaque nobis expedita amet, provident doloribus eveniet quis explicabo?</p>
</div>
</div>
</div>
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 0; /* 0 instead of 30px*/
width: 200px;
}
I hope you can give me a hand.
What I'm Trying to do in a mobile version it's to leve the menu bar always visible using position fixed to the visitor and it work's fine, the issue is that the second div called aside it shows behind the menu bar and I really do not know how to show it after the menu bar.
I'm working in a 500px mobile version.
How can I fix this ?
I hope you can help me
....
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 1000px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 95%;
margin-right: auto;
margin-left: auto;
background-color: #f1f1f1;
height: 1000px;
max-width: 950px;
}
header{
height: 150px;
border-color: red;
border-style: dotted;
margin-bottom: 5px;
}
aside{
height: 200px;
border-color: blue;
border-style: dotted;
margin-bottom: 5px;
}
section{
height: 200px;
border-color: yellow;
border-style: dotted;
margin-bottom: 5px;
}
article{
height: 200px;
border-color: deeppink;
border-style: dotted;
margin-bottom: 5px;
}
footer{
height: 200px;
background-color: green;
border-style: dotted;
}
nav{
width: 100%;
float: left;
}
nav ul{
list-style: none;
padding: 0;
overflow: hidden;
margin-top: 56px;
}
nav ul li{
padding: 10px;
display: inline-block;
overflow: hidden;
}
nav ul li a{
color: red;
}
.menu {
display: none;
}
#media screen and (max-width:700px){
.container{
background-color: deeppink;
}
}
#media screen and (max-width:500px){
body{
margin: 0;
}
.container{
background-color: #CCCCCC;
width: 100%;
}
header{
margin-bottom: 5px;
border-style:none;
height: auto;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
}
.menu .icon-menu{
color: #fff;
padding: 10px;
font-size: 28px;
}
.menu .menu_txt{
color: #fff;
float: right;
padding: 10px;
font-size: 18px;
margin-top: 5px;
margin-right: 5px;
}
nav{
background-color: #595959;
height: 100%;
position: fixed;
width: 90%;
display: none;
}
nav ul{
border-color: deeppink;
margin-top: 0px;
}
nav ul li{
background-color: #3E3E3E;
display: block;
margin-top: 0px;
width: 100%
}
aside{
margin-top: 0px;
}
}
</style>
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<div class="menu">
<div class="menu_txt">MENU</div>
<div class="icon-menu"></div>
</div>
<nav>
<ul>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
</nav>
</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id excepturi nesciunt in modi ratione alias vero ipsam optio quod quaerat fugiat est nihil temporibus, earum, necessitatibus ducimus hic cumque inventore?</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, incidunt necessitatibus asperiores quibusdam voluptas eos doloremque vitae consectetur earum facilis repudiandae ullam quisquam perferendis tempora. Illo, officia atque natus itaque.</section>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis necessitatibus explicabo obcaecati cum minima mollitia quam assumenda perferendis dicta. Cumque placeat, aliquam itaque ad quia accusamus autem tempora ex fugit.</article>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus at natus pariatur eligendi possimus ipsa corporis rem rerum omnis, perferendis, earum vero dolorum optio, nihil odit dolores autem asperiores recusandae!</footer>
</div>
</body>
</html>
In your media query, add margin top or padding top to your body to push the content below the menu then add top: 0; to your menu to make sure it stays at the top.
http://codepen.io/anon/pen/JWwRmN
#media screen and (max-width:500px){
body{
margin: 0;
margin-top: 50px;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
top: 0;
}