I am aligning three images of equal size within a three-column layout.
This should lead to three images in a row.
It works as expected in IE11, Edge, FF, but Chrome does not what it should: It shows image 1+2 in the first column, image 3 is in the second column.
What is Chrome doing here? If I give the containing div a fixed height of e.g. 120px the three images are aligned as expected, side by side.
Snippet:
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px
}
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
imgs are inline elements by default, so you can give img {display: block;} and it will solve the issue:
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px;
}
img {
display: block;
}
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
That is very interesting, and I can't explain why it behaves that way (other than welcome to cross browser development), but as a quick fix I can tell you if you add the CSS img {display: block} it will work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px;
}
img {
display: block;
}
</style>
</head>
<body>
<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>
<br>
<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>
</body>
</html>
Related
I'm struggling to create the layout I want as it looks like I need .col-3 to merge with .col-1 on desktops, but I don't know how to do it - is it possible?
Desktop
Mobile
| .col-1 |
| .col-2 |
| .col-3 |
This is my HTML:
<div class="grid-wrapper">
<div class="grid-items col-1">
<p>Slider - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</div>
<div class="grid-items col-2">
<p>Description - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</div>
<div class="grid-items col-3">
<p>Related items - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</div>
</div>
And this is my CSS:
.grid-wrapper {
display: grid;
grid-template-columns: 260px auto 23% 5%;
column-gap: 3%;
}
.col-1 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.col-2 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.col-3 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
#media screen and (max-width: 1090px) {
.grid-wrapper {
grid-template-columns: 260px auto;
}
.col-1, .col-2, .col-3 {
grid-column-start: 2;
grid-column-end: 3;
}
.col-1 {
grid-row-start: 1;
grid-row-end: 2;
}
.col-2 {
grid-row-start: 2;
grid-row-end: 3;
}
.col-3 {
grid-row-start: 3;
grid-row-end: 4;
}
}
#media screen and (max-device-width: 480px) {
.grid-wrapper {
grid-template-columns: auto;
}
.col-1, .col-2, .col-3 {
grid-column-start: 1;
grid-column-end: 2;
}
}
You need to set the height of the rows, see snippet below
.grid-wrapper {
display: grid;
grid-template-columns: 260px auto 23% 5%;
grid-template-rows: min-content 1fr; /* added */
column-gap: 3%;
}
.col-1 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.col-2 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.col-3 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
<div class="grid-wrapper">
<div class="grid-items col-1">
<p>Slider - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</div>
<div class="grid-items col-2">
<p>Description - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</div>
<div class="grid-items col-3">
<p>Related items - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</div>
When I use the background property like this, it works fine:
#my-element {
background: #000000 url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed;
color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
But when I try to use multiple images, none of the images load unless I take out the fall-back color:
#my-element {
background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Like this:
#my-element {
background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Any idea why this is? Is that just the way it is or am I doing something wrong?
So with Sam_'s help, I figured out that you can only have background-color specified on the second image, like this:
#my-element {
background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
color: #ff00ee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Thanks Sam!
Try this:
Remove the fallback background colour and specify it separately.
background: url("https://www.airstarkennels.com/images/m-main-background.webp") left
bottom/cover no-repeat fixed, url("https://www.airstarkennels.com/images/main-
background.jpg") left bottom/cover no-repeat fixed;
/*Falls back to this*/
background-color: #000000;
How to align text both left and right side equally?Can anyone help me?
example:
my code:
p {
line-height: 200%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet,consecteture adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.Duis autem vel eum iriure dolor in hendr</p>
</div>
p {
line-height: 200%;
text-align: justify;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet,consecteture adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.Duis autem vel eum iriure dolor in hendr</p>
</div>
I've been searching for an answer on this, and tried multiple methods of fixing it to no avail. I'm teaching myself CSS while re-building a site, and have a small problem.
I have a container within a parent container - the "sub-container" (for lack of a better term) has it's own header, a photo to the left, and copy to the right. The copy should be top-aligned to the photo, and equally spaced between the right edge of the photo and the right edge of the background image in the sub-container. What I'm getting is the photo in the proper place, with the copy butted up against the bottom right corner of the photo.
I'm fairly certain the issue is a mix between lack of knowledge and a mis-understanding of what is causing what... so any help with this is greatly appreciated.
Here's my CSS:
#wrapper {
background-image:url("images/About/Copy-Block.png");
background-repeat:no-repeat;
width: 745px;
height: 339px;
margin: 0 auto;
margin-top: 30px;
}
#wrapper head {
display:block;
padding-top: 15px;
padding-bottom: 2px;
}
#wrapper photo {
float: left;
}
.wrapcopy {
padding-left: 90px;
font-size: 13px;
color: #FFF;
}
and here is my html:
<div id="wrapper">
<div id="wrapper head" align="center">
<img src="images/About/About-Us-Subhead.png" width="748" height="116" />
</div>
<div class="wrapcopy">
<img src="images/About/image.png" width="257" height="194" class="wrapper photo"/>
<i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</i>
</div>
</div>
You wrote "photo" instead of "img" in your CSS, edit it like this and it will work!
#wrapper img{
float: left;
}
However, you have 2 images in your example and this will float both of them. You can solve that by giving for example an ID/class to those images.
First off, you aren't referencing your classes properly: "#wrapper photo" should be "#wrapper .photo". Also, id's can't have spaces in them ("#wrapper head").
There are a few ways you can add spacing you desire. The most straight forward way would be to add padding directly to the image:
#wrapper .photo { float: left; padding-right: 10px }
I would also like to point out that the markup you are using is very poor. Headlines should go in h1-h6 tags (images are still allowed in these tags!), paragraphs of text should be in p tags. Section or article tags might be an appropriate replacement for your wrapper div. It's not enough to know CSS, you also need to know the appropriate HTML markup to go with it.
A more efficient way of doing this would be like this:
section.foo {
background-image:url("images/About/Copy-Block.png");
background-repeat:no-repeat;
width: 745px;
height: 339px;
margin: 0 auto;
margin-top: 30px;
}
section.foo h1 {
padding-top: 15px;
padding-bottom: 2px;
text-align: center;
}
section.foo p {
padding-left: 90px;
font-size: 13px;
color: #FFF;
font-style: italic;
}
section.foo p img {
float: left;
padding-right: 10px;
}
And the HTML:
<section class="foo">
<h1><img src="images/About/About-Us-Subhead.png" width="748" height="116" /></h1>
<p><img src="images/About/image.png" width="257" height="194" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</section>
First of all, Never use any spaces naming an ID.
So change id="wrapper head" to id=id="wrapper_head"
Next, elements can be selected by their tags.
An Image is coded by <img tag so you can select it directly in CSS by img { } .
In your case, you want to select image inside #wrapper division, so select it by :
#wrapper img
{
/* Code Here... */
}
The problem of your code are the spaces in the id tags.
Try something like
<div id="wrapper_head" ....
instead of
<div id="wrapper head" ....
That should solve your problem!
I know this question has probably been asked before and I have tried several different ways of doing this, but I can not seem to get my inner DIV to expand to the full height of the viewport.
Here is my CSS:
html, body {margin: 0 auto; padding: 0; height: auto !important; min-height: 100%; height: 100%;}
p, h1 {font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;text-align:left;margin:1em 0}
/*******************************************************************************
Primary Container Structure
********************************************************************************/
#container {width: 100%; margin: 0px 0px; background-color: #fff; color: #333;}
#top {padding: .5em; background-color: #3b5998; color:White;}
#top h1 {padding: 0; margin: 0;}
#subcontainer {width: 90%; margin: 0px auto; line-height: 130%;}
#rightnav {height:100%; float: right; width: 244px; margin: 0; padding: 1em; max-width:244px;}
#content {height:100%; border-left: 1px solid gray; margin-right: 284px; border-right: 1px solid gray; padding: 1em;}
#leftnav p, #rightnav p {margin: 0 0 1em 0;}
#content h2 {margin: 0 0 .5em 0;}
#footer {clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}
Here is my HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="SHELL.aspx.cs" Inherits="SHELL" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="top">
<h1>NAME</h1>
</div>
<div id="subcontainer">
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</form>
</body>
</html>
You cannot have a middle container first calculate a footer height, then subtract it from it's 100% height parent container.
You're only options with your current markup are:
Use javascript (unncessary overhead)
Use tables (probably not a good idea)
Here is an option that I had to rearrange your code: Code Here
I made your height and footer work, but it will require you to use faux columns, a common technique for bottom sticking footers. See this for an example.
Simply, assign a left border image to repeat-y on the body, and a right border image to repeat-y, background right, on the subcontainer.