I want to have 3 divs with text vertically aligned top, middle and bottom of the parent with an image on the right.
If possible, I need to support older browsers as well. Sorry if this is simple, I have very little experience with css.
I think you want something like this:
.container{
width: 500px;
height: fit-content;
display:flex;
background-color: #ff0000;
padding: 20px;
border: 1px solid black;
}
.textPart{
display:flex;
flex-direction:column;
width:50%;
background-color: rgba(255, 255, 255, 0.5);
}
.text{
border: 1px solid black;
padding:10px;
}
.imgPart {
background-image: url('https://www.placehold.it/200x400');
width: 50%;
border: 1px solid black;
}
<div class="container">
<div class="textPart">
<div class="text"><h1>Some text here</h1></div>
<div class="text"><h1>Some text here</h1></div>
<div class="text"><h1>Some text here</h1></div>
</div>
<div class="imgPart"></div>
</div>
The key point here is display: flex.
And about the browser support, most of the browsers, including may old versions, also support flexbox with or without the prefix -webkit-. (src- caniuse.com)
I used "float" property for this problem. because it is simple and have a good browser support. but you must notice that the width of two column is variable according to image size. you could use any image you want in "img" tag.
*, *::after, *::before {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#whole-parent {
background-color: rgb(120,110,122);
color: #fff;
}
/* these two class is directly related to layout */
.clearfix::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
padding: 5px;
}
/* ------------- */
.wid1 {
width: 70%;
}
.wid2 {
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>three divs</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="whole-parent" class="clearfix">
<div class="column wid1">
<div>
<h1>div1</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
<div>
<h1>div2</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
<div>
<h1>div3</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum enim, nulla rerum. Minima tenetur dignissimos ab nulla rem. Eaque est exercitationem illum quod non rem nam nostrum corporis! Amet, alias deserunt itaque culpa provident ullam nihil atque. Illum minima reiciendis, mollitia repellendus assumenda libero, ducimus. Vel, a, incidunt. Optio laudantium, facere possimus laboriosam fuga accusamus.
</div>
</div>
<div class="column wid2">
<img src="book1.jpg" alt="an image">
</div>
</section>
</body>
</html>
Related
When I am zooming it (in and out) and increasing font size above 10px the two divs goes up and down and not coming properly side by side. Where is the exact error?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial Site</title>
<style>
*{
margin: 0;
padding: 0;
}
.container1{
display: inline-block;
background-color: aquamarine;
height: 90vh;
font-size: 20px;
position: relative;
width: 50%;
}
.container2{
display: inline-block;
background-color: coral;
height: 90vh;
font-size: 20px;
position: relative;
width: 50%;
}
</style>
</head>
<body>
<div class="container1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias nostrum commodi aut ab corrupti repellendus accusamus hic quos. Explicabo porro vitae doloremque cumque quidem illo ratione vel omnis ex iure!</div><div class="container2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto nesciunt odio molestiae eaque tenetur, dolore quas excepturi in earum, totam iusto aut! Sapiente, optio. Facere illo eum, quas recusandae natus praesentium nemo consequatur consectetur delectus laboriosam quis adipisci eos dicta.</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial Site</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container1 {
display: inline-block;
background-color: aquamarine;
height: 90vh;
font-size: 20px;
position: relative;
width: 50%;
}
.container2 {
display: inline-block;
background-color: coral;
height: 90vh;
font-size: 20px;
position: relative;
width: 50%;
}
</style>
<body>
<div class=container>
<div class="container1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias nostrum commodi aut ab
corrupti repellendus accusamus hic quos. Explicabo porro vitae doloremque cumque quidem illo ratione vel omnis ex
iure!</div>
<div class="container2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto nesciunt odio molestiae
eaque tenetur, dolore quas excepturi in earum, totam iusto aut! Sapiente, optio. Facere illo eum, quas recusandae
natus praesentium nemo consequatur consectetur delectus laboriosam quis adipisci eos dicta.</div>
</div>
</body>
</html>
Wrapping the div in two containers did solve the problem. We need to look at the problem a little bit more, but did the solution help us do this?
this way...
* {
margin : 0;
padding : 0;
}
div {
display : inline-block;
height : 90vh;
font-size : 20px;
/* position : relative; not needed. */
width : 50%;
vertical-align : top; /* this one is missing.. */
overflow : scroll; /* could be usefull ?... */
}
.container1 {
background : aquamarine;
}
.container2 {
background : coral;
}
<div class="container1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias nostrum
commodi aut ab corrupti repellendus accusamus hic quos. Explicabo porro
vitae doloremque cumque quidem illo ratione vel omnis ex iure!
</div><div class="container2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
nesciunt odio molestiae eaque tenetur, dolore quas excepturi in earum,
totam iusto aut! Sapiente, optio. Facere illo eum, quas recusandae natus
praesentium nemo consequatur consectetur delectus laboriosam quis adipisci
eos dicta.
</div>
I have started learning HTML/css about 2 weeks ago and (among others) this is one of the pages I came up with, but I can't make the image to resize when I shrink down the window. Most of the lessons until now have been about HTML and CSS only and how to make the document easy to read for screen readers and I wanted to do some practice with whatever knowledge I had. Any ideas why the image doesn't shrink down along with the text and why?
Thank you very much!
HTML:
#import url('https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap');
body {
margin: 0;
padding: 0;
background-color: #d89cf6;
}
.top {
position: relative;
padding: 1em 2em 1em 2em;
height: 3em;
background-color: #3e206d;
margin: auto;
overflow: hidden;
border-top: solid 6px;
border-bottom: solid 1px;
}
.top h1 {
position: absolute;
display: flex;
float: left;
margin: 0;
padding: 0;
margin-top: .3em;
font-family: 'Kelly Slab', cursive;
font-size: 2.4em;
color: #f0e3ff;
}
.top ul {
list-style-type: none;
display: flex;
float: right;
margin: 0;
padding: 0;
margin-top: 1.43em;
}
.top li {
padding: 0 0.3em;
margin: auto;
margin-top: .5em;
position: relative;
}
.top a {
text-decoration: none;
color: #f0e3ff;
font-family: 'Kelly Slab', cursive;
font-size: 1.2em;
}
.main {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
.main h2 {
font-size: 1.8rem;
}
.main p {
font-size: 1.3rem;
}
.main img {
min-width: auto;
width: auto;
max-height: 29em;
min-height: 25%;
}
.text_picture {
float:right;
width: auto;
margin: auto;
}
.thank_you {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
footer {
font-size: 1.2rem;
margin: auto;
text-align: center;
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Skeleton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<header>
<div class="top">
<h1>Arghhhh</h1>
<nav class="internal_nav">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section class="main">
<article>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore vero natus libero labore! Voluptas, culpa cum animi, explicabo laudantium fuga rem hic fugiat deleniti eveniet ad dignissimos minus! Nisi cumque dolore illo corrupti quo recusandae possimus aliquam officiis blanditiis, inventore veritatis. Cum itaque molestiae iusto dolorem esse illo saepe ipsam dolor cupiditate neque velit, dolore error earum eveniet tempora!
</p>
<div id="text_picture_container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ab magni officiis eos rem in aperiam tenetur quidem maiores, tempore enim, id sapiente velit pariatur ducimus. Velit vero consequuntur possimus quam culpa voluptatum officia est voluptate eum, labore facilis assumenda rerum harum ipsam facere quas cupiditate. Itaque facilis voluptas cupiditate eos? Commodi odit tempore nihil blanditiis, excepturi quidem vero. Nam nesciunt corporis minima alias aperiam voluptate neque quidem consequatur ab sed, mollitia nulla labore expedita? Laboriosam atque error, similique temporibus eius, sunt quaerat nobis vero maxime corrupti quis ipsam. Aliquam rem id harum culpa nesciunt facere sit atque provident neque!
</p>
<div class="text_picture">
<figure>
<img src="images/wallpaper-364615676716148alamn2ffq.jpg" alt="lone tree in a field with a orange/magenta sunset in the background">
<br>
<figcaption>A lonely tree in the middle of a field, with a really colorful sunset background.
</figcaption>
</figure>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum assumenda praesentium dolor et veritatis libero. Eveniet quasi fugiat, consectetur error possimus natus? Quasi explicabo deserunt quisquam necessitatibus hic aspernatur totam tenetur eveniet accusamus! Voluptate reprehenderit sunt repellat aut adipisci temporibus provident vitae amet cum doloribus dolorum tempora, perferendis voluptas aperiam libero similique distinctio quam corrupti consequatur vero magnam commodi. Enim, consequuntur. Quod maiores laudantium nesciunt doloremque, voluptatem dolorum amet. Tempore, vel dignissimos, veniam magni recusandae saepe ab labore itaque eum officiis, quaerat quae eveniet? Placeat nemo aperiam similique earum, tempore dicta totam atque. Perspiciatis, aut. Ea distinctio iure minima, id doloremque quisquam quidem expedita nemo. Facere dignissimos, architecto similique repellendus aliquid dicta deserunt et esse voluptate nulla ipsum quod earum voluptas nobis consectetur expedita quas, non itaque. Optio incidunt dolor distinctio, ducimus beatae doloribus magni ut aliquam a facere laborum ipsam ratione voluptatem. Dolore modi error nemo impedit recusandae?
</p>
<div class="first_survey">
<form class="survey">
<fieldset>
<legend>Chose what impressed you the most:</legend>
<label for="style">The styling</label>
<input type="checkbox" id="style" name="survey_choice" value="style">
<label for="writing">The writing</label>
<input type="checkbox" id="writing" name="survey_choice" value="writing">
<label for="pictures">The pictures</label>
<input type="checkbox" id="writing" name="survey_choice" value="pictures">
<div class="button">
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
<div href="#" class="thank_you">
<h2>Thank you for taking your time to browse my webpage!
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quisquam commodi sapiente quos ut unde consectetur alias culpa veniam, quasi perspiciatis expedita esse accusantium quas enim quam soluta, quibusdam sit? Quisquam placeat, iure possimus cupiditate libero non esse quasi facere deserunt debitis delectus reiciendis aliquid magnam a blanditiis, eaque officia.
<p>
</div>
</article>
</body>
<footer>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dolore?</h6>
</footer>
</html>
You can always use VH unit which stands for viewport width.
Responsive Text
However, I suggest using REM and EM units instead, of course, this depends on your needs.
REM and EM units
Feel free to read this article which explains this topic in depth.
CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
Now, regarding responsive image sizing, you can simply add a class with these properties and set it to the image you want.
.responsive {
width: 100%;
height: auto;
}
As I said before, read the Medium article, you can use REM, EM, PX, % units on images as well.
How would I make the header full width? And I would like the content class to the right, and the skills class to the right 30% to 70%. If you are able to understand the issue I wasn't able to figure out please tell me what you did to get it to work. Thanks.
I couldn't find any info on how to make the header full width, and move the content to other spots...
* {
box-sizing: border-box;
overflow: hidden;
padding: 10px;
margin: 0px;
}
body {
background-image: url("coder.jpeg");
background-size: cover;
}
.wrapper {
display:grid;
grid-template-columns: 70% 30%;
grid-template-rows: ;
grid-gap: 10px;
}
.header {
background-color: rgba(153, 153, 153, 0.99);
text-align: center;
border-radius: 10px;
font-size: 20px;
}
.skills {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
.content {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cl32</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<header>
<h1>Cdad</h1>
</header>
</div>
<div class="skills">
<aside>
<h2>Skills</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla fuga asperiores iusto eveniet aliquid nobis aliquam ducimus, tempora consequatur neque earum molestiae unde porro, quis numquam error illum temporibus, incidunt autem. Temporibus maxime esse magnam inventore odit vero in quae sit quo laboriosam? Architecto saepe repudiandae ducimus possimus magni numquam?</p>
</aside>
</div>
<div class="content">
<h2>yuyuyggoggo</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum mollitia sunt at aliquid unde vel sapiente quas sequi repudiandae, quam facere inventore suscipit sed nam quae possimus reprehenderit doloremque. Reprehenderit nisi architecto vel molestiae placeat necessitatibus deleniti laborum facere unde itaque magnam amet ut aspernatur distinctio atque ad perspiciatis nam beatae fugiat illum error veritatis, cupiditate odit? Deserunt earum magni id animi, temporibus sit obcaecati ipsum. Blanditiis, expedita? Fugit dicta ex dignissimos, esse totam voluptas illo maxime minus quae nisi velit nemo sequi nulla et omnis deserunt nam sed ducimus. Minima animi dolor vitae architecto suscipit ipsa eaque autem incidunt.</p>
</div>
</div>
<!--warpper class ends-->
</body>
</html>
Don't know if I understand your question correctly but if you add grid-column: 1 / span 2;to your header class it will give you full width.
Footer is on right place but the columns in section are overlapping the footer
.columns {
float:left;
width: 22%;
height: 30%;
margin-left:8%;
}
Instead of float:left; I have used display:inline-block; but issue
not resolved this problem is occurring when website displayed on
mobile. When viewed on desktop it's working fine.
Try adding this to your CSS
box-sizing: border-box;
.container {
background: #f4f4f4;
padding: 5%;
margin: 5%;
}
.column1 {
background: #b40404;
padding: 5%;
color: #fff;
}
.column2 {
background: #000;
padding: 5%;
color: #fff;
}
.column3 {
background: #b40404;
padding: 5%;
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="column1">
This is column 1<br><br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus vero labore obcaecati illum reprehenderit incidunt consequatur quidem, id repellendus impedit, quaerat, mollitia ea culpa sint? Totam sunt omnis quis
eaque.
</div>
</div>
<div class="col-md-4">
<div class="column2">
This is column 2<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium mollitia, incidunt accusantium iure eius suscipit fugit tempore veniam deleniti, nulla dolore repudiandae voluptas, eaque architecto ratione recusandae
consectetur officia. Saepe.
</div>
</div>
<div class="col-md-4">
<div class="column3">
This is column 3<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis vitae nulla, beatae tenetur ea eaque obcaecati perspiciatis, architecto nemo culpa id non facilis distinctio aliquam. Accusamus voluptatum mollitia perferendis
libero.
</div>
</div>
</div>
</div>
you can use Bootstrap. Use the class container then row and define columns inside it. Like this:
feel free to rephrase my question title, I couldn't think of how to word it correctly.
Having some CSS related issues.I have a row element (not to be confused with bootstrap this is separate). and inside this I have two columns.
the columns are both dynamic in the sense that on resize they change height. how can I get the divs to match the tallest element.
I am trying to find a way to do this with Pure CSS. Hopefully the image below explains my theory more
My real example is below, I need the first column ( the one with the line in ) to match the height of the form div both contained within the row
Two alternatives:
CSS tables
.row {
display: table;
width: 500px; /* for demo */
background-color: #eee;
border-spacing: 5px;
}
.col {
display: table-cell;
vertical-align: top;
padding: 5px;
border: 1px solid red;
}
.col1 {
width: 100px;
}
<div class="row">
<div class="col col1">
short column
</div>
<div class="col col2">
long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
</div>
</div>
And using CSS Flexbox
.row {
display: flex;
align-items: stretch;
width: 500px;
}
.col {
margin: 5px;
padding: 5px;
border: 1px solid red;
}
<div class="row">
<div class="col col1">
short column
</div>
<div class="col col2">
long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
</div>
</div>
This is obviously stripped down to the bare essentials, mileage may vary depending on your design and it's responsiveness.