I have an issue where an element is auto-sized by an unknown image's dimensions. I'd like a sibling element to this image to be constrained by the same width as the image is set to. Without using javascript.
I've set up a pen to show what I mean:
.container {
display: table
}
.img-wrapper {
line-height: 0
}
.info {
display: table-cell;
vertical-align: middle;
background: black;
color: white;
}
.info p {
margin: 0 2vmin
}
<div class="container">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>
https://codepen.io/Slagon/pen/oNePqNo
Is it possible for .info to be as wide .img-wrapper? (Ignore that the dimensions are predefined in this pen).
I used Bootstrap to solve this. Essentially how it works is a normal webpage spans 12 columns. So in this case I put each of you divs in a col-6 so that each element would take up half of the page. BOTH of these col-6 spans are contained by a row. Please see below.
.container {
display: block;
justify-content: center;
}
.img-wrapper {
line-height: 0;
}
.info {
display: flex;
background: black;
color: white;
width: 100%;
height: 100%;
}
.col-6 > .img-wrapper > img {
width: 100%;
height: 100%;
margin: 0;
}
div.col-6 {
padding: 0;
}
p {
width: 100%;
text-align: center;
margin: auto;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
</div>
<div class="col-6">
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>
</div>
</div>
</body>
Click full-page
Related
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
.container {
max-width: 1170px;
margin: 0 auto;
}
.row::after {
display: block;;
content: "";
clear: both;
}
.col {
float: left;
}
.col-6 {
width: 50%;
}
.content {
font-size: 3em;
text-align: center;
color: #fff;
background-color: green;
width: 100%;
height: 300px
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-6">
<div class="content">Half of container width</div>
</div>
<div class="col col-6">
<div class="content green">The remaining part of the viewport
horizontally
</div>
</div>
</div>
</div>
</body>
</html>
I would like to achieve this effect where the first col-6 spans the first 50% of the container's width , and the second col-6 spans from 50% of the containers width to the end of the viewport. I'd like to put an image there, if it matters ( if absolute positioning must be used ).
Hopefully this is descriptive enough
You can try something with viewport units:
updated codepen
.container {
max-width: 1170px;
margin: 0 auto;
}
.row::after {
display: block;
;
content: "";
clear: both;
}
.col {
float: left;
}
.col-6 {
width: 50%;
}
.content {
font-size: 3em;
text-align: center;
color: #fff;
background-color: green;
width: 100%;
height: 300px
}
.half-vw .content {
width: 50vw;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-6">
<div class="content">Half of container width</div>
</div>
<div class="col col-6 half-vw">
<div class="content">The remaining part of the viewport horizontally
</div>
</div>
</div>
</div>
</body>
</html>
This is trivial to do with Flexbox.
Use flex-basis : 50% on the first child,
then flex-grow : 1 on the second child (Meaning, "Take whatever space is left").
.row {
display: flex;
height: 200px;
}
.row .first {
background:green;
flex-basis: 50%;
}
.row .second {
background: lightblue;
flex-grow: 1;
}
<div class="row">
<div class="first">First half</div>
<div class="second">Remaining space</div>
</div>
I have one parent-div which contains three divs and I would like to make them same height but it is not working. The first and third div contains each an image. The second div contains three divs with content.
Here is the HTML:
<div class="container">
<div class="column1">
<img src="http://placehold.it/300x318">
</div>
<div class="column2">
<div class="row1">
<div class="text">UNIKE GUSTAVIANSKE STILMØBLER.</div>
<div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
<div class="text">OG 1800-TALLS TRADISJONER.</div>
</div>
<div class="row2"></div>
<div class="row3">
<div class="text">
Åpningstider:<br>
Man - Fre 11 -17 Lør 11- 15
</div>
</div>
</div>
<div class="column3">
<img src="http://placehold.it/300x318">
</div>
</div>
The .container has the css-rule display:flex;. When I apply this also to .column1, .column2 and .column3, the layout breaks.
I am trying to achieve that the images height increase and decrease depended to .column2. Unfortunately, I have not the possibility to change the HTML or use JS.
Here you can see a JS-Fiddle. I have commented out the CSS-rules.
Many thanks for your help!
In the question you mention that you apply display:flex to .column1, .column2 and .column3.
Instead just apply this to .column1 and .column3 and leave .column2 as display:block.
This should resolve your problem (works in your JS-Fiddle).
You just need to apply a height and max-width to the images. They will distort to fit into the space and make your images look weird. If you choose images that are this dimensions, they will look better.
.container {
width: 100%;
display: flex;
}
.container img{
height: 100%;
max-width: 100%;
}
.row1 {
background-color: #fff;
padding-top: 40px;
}
.row1 .text {
font-size: 30px;
text-align: center;
line-height: 50px;
font-weight: 300;
}
.row2 {
height: 150px;
background-color: #e4e8eb;
}
.row3 {
background-color: #c7cacf;
padding: 10px 0px;
}
.row3 .text {
font-size: 25px;
text-align: center;
line-height: 25px;
}
<div class="container">
<div class="column1">
<img src="http://placehold.it/300x318">
</div>
<div class="column2">
<div class="row1">
<div class="text">
UNIKE GUSTAVIANSKE STILMØBLER.</div>
<div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
<div class="text">OG 1800-TALLS TRADISJONER.
</div>
</div>
<div class="row2"></div>
<div class="row3">
<div class="text">Åpningstider:
<br>Man - Fre 11 -17 Lør 11- 15</div>
</div>
</div>
<div class="column3">
<img src="http://placehold.it/300x318">
</div>
</div>
you can add this lines for row css
.row {
display: flex;
justify-content: center; /* align horizontal */
align-items: center;
}
You just need to specify the height and width of image tag.Just add width:100% and height 100% for image tag.
.container {
width: 100%;
display: flex;
}
.container img{
height: 100%;
max-width: 100%;
}
.row1 {
background-color: #fff;
padding-top: 40px;
}
.row1 .text {
font-size: 30px;
text-align: center;
line-height: 50px;
font-weight: 300;
}
.row2 {
height: 150px;
background-color: #e4e8eb;
}
.row3 {
background-color: #c7cacf;
padding: 10px 0px;
}
.row3 .text {
font-size: 25px;
text-align: center;
line-height: 25px;
}
.imgsize{
width: 100%;
height: 100%;
}
<div class="container">
<div class="column1">
<img src="http://placehold.it/300x318" class="imgsize">
</div>
<div class="column2">
<div class="row1">
<div class="text">
UNIKE GUSTAVIANSKE STILMØBLER.</div>
<div class="text">VI SELGER HÅNDVERK ETTER 1700-</div>
<div class="text">OG 1800-TALLS TRADISJONER.
</div>
</div>
<div class="row2"></div>
<div class="row3">
<div class="text">Åpningstider:
<br>Man - Fre 11 -17 Lør 11- 15</div>
</div>
</div>
<div class="column3">
<img src="http://placehold.it/300x318" class="imgsize">
</div>
</div>
If I'm understanding properly you can add this to your styles:
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
Your columns are already filling to the parent height. Using the above css styles the images in this will fill the parent div height and basically overflow the width. If you do something else like set height of the images to 100% it will distort the image.
Here is a similar question with same (but more detailed) answer. https://stackoverflow.com/a/26967278/3366016
I have a problem with getting text to appear in the middle of the screen (height-wise) on a webpage. The HTML of the site is:
<html lang="en">
<head>
<title>example</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>
What I want to do is have the home-container element stretch all the way to the bottom of the page, and have the text that should be in the middle in the middle of it. My css looks like:
html, body{
height:100%;
}
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
}
.home-row{
vertical-align: middle;
}
I understand that what I want to do is possible if I instead make home-container like so:
.home-container{
width: 100%;
height: 100%;
background-color: rgba(139,0,0,0.4);
align-items: center;
display: flex;
}
but this doesn't work on all browsers. What am I doing wrong with the vertical-align property? Id isn't really doing anything in my example...
to use vertical-align:middle add display:table-cellon .home-row and display:table on .home-container
see here jsfiddle or snippet
html,
body {
height: 100%;
}
.home-row {
vertical-align: middle;
display: table-cell;
}
.home-container {
width: 100%;
height: 100%;
background-color: rgba(139, 0, 0, 0.4);
display: table;
}
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
read more here vertical align
EDIT 2020
There's a better way to achieve the same result using flexbox
Check snippet below
Play around with flexbox. You can add it on other items not just the container
.home-container {
background: red;
display:flex;
flex-direction: column;
justify-content: center;
height:100vh;
}
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
Try this:
<style>
.home-container {
width: 100%;
height: 800px;
background-color: rgba(139, 0, 0, 0.4);
text-align: center;
}
.some-other-class {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
HTML
<div class="home-container">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
html, body{
height:100%;
margin: 0;
}
.home-container{
width: 100%;
height: 100%;
display: table;
text-align: center;
background-color: rgba(139,0,0,0.4);
}
.home-row{
display: table-cell;
vertical-align: middle;
}
<html lang="en">
<head>
<title>example</title>
<link href="example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>
So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:
But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form.
I want the boxes to be next to each other, with about an inch of separation between them.
I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:
I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.
http://jsfiddle.net/kkobold/qMQL5/
#header {
width: 100%;
background-color: red;
height: 30px;
}
#container {
width: 300px;
background-color: #ffcc33;
margin: auto;
}
#first {
width: 100px;
float: left;
height: 300px;
background-color: blue;
}
#second {
width: 200px;
float: left;
height: 300px;
background-color: green;
}
#clear {
clear: both;
}
<div id="header"></div>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="clear"></div>
</div>
This will work
<div style="width:800px;">
<div style="width:300px; float:left;"></div>
<div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>
<div style="display: inline">
<div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
<div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div>
I am just giving the code for two responsive divs side by side
*{
margin: 0;
padding: 0;
}
#parent {
display: flex;
justify-content: space-around;
}
#left {
border: 1px solid lightgray;
background-color: red;
width: 40%;
}
#right {
border: 1px solid lightgray;
background-color: green;
width: 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="parent">
<div id="left">
lorem ipsum dolor sit emet
</div>
<div id="right">
lorem ipsum dolor sit emet
</div>
</div>
</body>
</html>
This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.
HTML
<div class="container">
<header>
<div class="logo">Logo</div>
<div class="menu">Email/Password</div>
</header>
<div class="first-box">
<p>Video Explaning Site</p>
</div>
<div class="second-box">
<p>Sign up Info</p>
</div>
<footer>
<div>Website Info</div>
</footer>
</div>
CSS
.container {
width:900px;
height: 150px;
}
header {
width:900px;
float:left;
background: pink;
height: 50px;
}
.logo {
float: left;
padding: 15px
}
.menu {
float: right;
padding: 15px
}
.first-box {
width:300px;
float:left;
background: green;
height: 150px;
margin: 50px
}
.first-box p {
color: #ffffff;
padding-left: 80px;
padding-top: 50px;
}
.second-box {
width:300px;
height: 150px;
float:right;
background: blue;
margin: 50px
}
.second-box p {
color: #ffffff;
padding-left: 110px;
padding-top: 50px;
}
footer {
width:900px;
float:left;
background: black;
height: 50px;
color: #ffffff;
}
footer div {
padding: 15px;
}
You can do it in three ways:
Float Method
<div class="float-container">
<div class="float-child">
<div class="green">Float Column 1</div>
</div>
<div class="float-child">
<div class="blue">Float Column 2</div>
</div>
</div>
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
}
Flexbox Method
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
CSS Grid Method
<div class="grid-container">
<div class="grid-child purple">
Grid Column 1
</div>
<div class="grid-child green">
Grid Column 2
</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
Source
Have a look at CSS and HTML in depth you will figure this out. It just floating the boxes left and right and those boxes need to be inside a same div. http://www.w3schools.com/html/html_layout.asp might be a good resource.
Regarding the width of your website, you'll want to consider using a wrapper class to surround your content (this should help to constrain your element widths and prevent them from expanding too far beyond the content):
<style>
.wrapper {
width: 980px;
}
</style>
<body>
<div class="wrapper">
//everything else
</div>
</body>
As far as the content boxes go, I would suggest trying to use
<style>
.boxes {
display: inline-block;
width: 360px;
height: 360px;
}
#leftBox {
float: left;
}
#rightBox {
float: right;
}
</style>
I would spend some time researching the box-object model and all of the "display" properties. They will be forever helpful. Pay particularly close attention to "inline-block", I use it practically every day.