I'm going to re-ask this question in a more simple way:
I am using the following code from W3school, but I need to change the images to 50% which creates a huge gap between the columns. Is there a way to align the left column to the right so that the images are close together?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
</div>
</body>
</html>
So I think I "fixed" your issue with flexbox but I would suggest reordering your code structure. You can see the fix below. Also, I wrote an article on CSS references that you should check out. There are several links that I use almost daily when designing UI. Heres the link...
https://medium.com/#hunter.campbell843/css-references-for-new-developers-and-old-6e3dbead437f
.column {
float: left;
display: flex; //These are the only
justify-content: center; //things i added
width: 50%;
padding: 5px;
background-color: aqua;
}
Related
I am attempting to implement three images horizontally into a HTML website. However when i format it using CSS nothing is happening, I am very confused as it should theoretically work. I would greatly appreciate if anyone could help me out, thank you.
HTML page image part:
</p>
<div class="row">
<div class="column">
<img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
</div>
<div class="column">
<img src="gosport.jpg" alt="Gosport" style="width:33%">
</div>
<div class="column">
<img src="gosportRace.jpg" alt="Race" style="width:33%">
</div>
</div>
</p>
CSS image formatting part:
/* Three image containers */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
If the grid is not working try to add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 5px;
box-sizing:border-box; // important
}
Instead of using div structure you can try something with ul & li, also make use of "column-count" property using which you can define the number of columns you want in a horizontal row.
Refer link for more understanding about "column-count" property:
https://www.w3schools.com/cssref/css3_pr_column-count.asp
<!DOCTYPE html>
<html>
<head>
<style>
ul {
column-count: 3;
list-style: none;
}
</style>
</head>
<body>
<div class="row">
<ul>
<li>
<img src="gosportSunset.jpg" alt="Sunset "/>
</li>
<li>
<img src="gosport.jpg" alt="Gosport" />
</li>
<li>
<img src="gosportRace.jpg" alt="Race" />
</li>
</ul>
</div>
</body>
</html>
This question already has answers here:
CSS - center two images in css side by side
(5 answers)
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 4 years ago.
I am fairly new to html and css, and I was trying to make two images go side by side in the center of the screen (automatically adjusting themselves when the screen is scaled).
I have only been able to get the two images to go next to each other and not been able to center them or make them automatically scale.
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The two images should go next to each other in the centre of the screen, scaling themselves on different sized browser windows and when browser is zoomed in or out. I should be able to change the size of the images to what I need.
Here is a way to do it with flexbox
JSFiddle demo here
* {
height: 100%;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.images {
display: flex;
justify-content: center;
align-items: center;
margin: auto 0;
padding: 0 200px;
}
#media screen and (max-width: 768px) {
.images {
flex-direction: column;
padding: 0;
}
}
<div class="images">
<img src="https://placekitten.com/600/400">
<img src="https://placekitten.com/600/400">
</div>
Add the following css-
body
{
text-align:center;
}
.row
{
display:inline-block;
}
I hope this will help you.
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.ul_class {
width: 100%;
display:block;
text-align: center;
}
.li_class {
width: 33.33%;
display:inline-block;
margin-right: -4px;
}
</style>
</head>
<body>
<ul class="ul_class">
<li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
<li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
</ul>
</body>
</html>
Use below code in your css.
OR
You can use flex. check below link.
https://www.w3schools.com/cssref/css3_pr_justify-content.asp
.row{ width:80%; margin:0 auto; }
try using flex on the row element
.row {
display: flex;
justify-content: center;
align-items: center;
}
I have a div in the following format
<div id="main">
<div id="row1">
<div id="label1"></div>
<div id="value1"></div>
</div>
<div id="row2">
<div id="labe2"></div>
<div id="value2"></div>
</div>
<div id="row3">
<div id="label3"></div>
<div id="value3"></div>
</div>
</div>
I am trying to achieve a layout, where all the values are aligned on top of each other to the right and labels to the left within each row.
I have tried using float:left and float:right like
css
#row1{
display: inline
}
#value1{
float:right
}
#row2{
display: inline
}
#value2{
float:right
}
#row3{
display: inline
}
#value3{
float:right
}
But, this css i tried is missing the layout and row items are colliding into each other. Can someone help what could be the issue?
If you are familiar with how a HTML table works, then you can use display:table-* properties. Btw, use class instead of id. Use id specifically for things such as DOM manipulation or forms. Do not use id for styling unless you have no other choice.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline</title>
<style>
#main {
border: 5px dotted grey;
display: table;
width: 300px;
}
.row {
display: table-row;
}
.value {
border: 1px solid red;
display: table-cell;
width: 50%;
}
label {
border: 1px solid blue;
display: table-cell;
}
</style>
</head>
<body>
<main id="main">
<div class='row' id="row1">
<label for='value1'>V1</label>
<div id="value1" class='value'>44</div>
</div>
<div class='row' id="row2">
<label for='value2'>V2</label>
<div id="value2" class='value'>ALPHA</div>
</div>
<div class='row' id="row3">
<label for='value3'>V3</label>
<div id="value3" class='value'>💀</div>
</div>
</main>
</body>
</html>
If I've understood your question right you want to have labels on the left and values on the right just in front of their labels.
Here is example for you http://codepen.io/g1un/pen/PGKEwB
Add to your rows class row and to labels class label and apply the next css to it:
.row::after {
clear: both;
display: table;
content: '';
}
.label {
float: left;
}
And don't apply to your rows display: inline; - it just does harm to your code.
Here's my solution - rather simple, replaced your whole CSS (i.e. no other CSS):
* {
box-sizing: border-box;
margin: 0;
}
div {
border: 1px dotted #fa5;
}
#main > div > div {
display: inline-block;
width: 49.8%;
padding: 10px;
}
Codepen: http://codepen.io/anon/pen/GjvykB
Change the width value to any desired setting < 50%
P.S.: border isn't necessary, used only to visualize the elements, th very last padding also isn't necessary
If you don't need to support older IE browsers, go with flexbox
Side note: Don't use id like that, use class
.main > div {
display: flex;
}
.main > div > div {
margin: 0 10px;
}
<div class="main">
<div class="row1">
<div class="label1">1</div>
<div class="value1">One</div>
</div>
<div class="row2">
<div class="label2">2</div>
<div class="value2">Two</div>
</div>
<div class="row3">
<div class="label3">3</div>
<div class="value3">Three</div>
</div>
</div>
on my opinion - try display: inline-block; I will hope it help you.
Looking through some documentation, it looks like you an try using position for left and right alignment. I would suggest trying out something like in the documentation:
.right {
position: absolute;
right: 0px;
width: 300px;
}
I've been stuck with the problem of trying to align all the content (logos, links and facebook icon) on my navigation bar to all be vertically centered. I've done some research and a good topic from StackOverflow came up, which can be found here: How do I vertically center text with CSS?
I've tried the suggested ideas all to no avail. I'm really at a loss with this one and would appreciate any help in making my navigation look good across multiple browsers (mobile devices also).
Another issue I've come up with is being able to add content in the main body of the webpage. As you can see in the codepen below, some of the content written in the body is hidden by the header. I can add line breaks to fix this but I'm 90% sure the way I've laid out my content (header, main, footer all enclosed in body tags) is incorrect.
CodePen
Here is what I've done to try and fix the problem: headerLeft refers to the logo to the left of the links, and headerRight is vice versa. The header tag had a class of verticalAlignHelper but it seemed to do nothing so verticalAlignHelper isn't really being used now.
.headerLeft {
margin-left: 30px;
margin-right: 40px;
float: left;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
.headerRight {
margin-left: 30px;
margin-right: 40px;
float: right;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
verticalAlignHelper {
vertical-align: middle;
line-height: 150px;
height: 150px;
}
Any advice is much appreciated. This is my first website so I'd appreciate if the advice was as basic as can be. Cheers.
Prevent covered-up body content
Use JavaScript to set a padding-top on body, just larger than the top height. Like so:
$("body").css("padding-top", $("nav").height() + 25);
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Navbar</nav>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
Fix vertical alignment of nav-bar images
Because I can't see the images, the following are only suggestions:
Easiest: Make the navigational bar the same height as the image (or vice versa)
Manually hard-code margins in (only if you know exact heights of everything)
Hardest but best Use JavaScript (dynamic and fun)
$(function() {
var elem = $("#img4");
elem.css("margin-top", (elem.parent().height()-elem.height())/2);
});
* {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
img {
height: 75px;
}
div.navbar {
width: 100%;
height: 100px;
background-color: lightgrey;
margin-bottom: 20px;
}
div.text {
line-height: 100px;
display: inline-block;
vertical-align: top;
}
img#img1 {
height: 100px;
}
div#div2 {
height: 75px;
}
div#text2 {
line-height: 75px;
}
img#img3 {
margin: 12.5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text">Uncentered image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img1" />
<div class="text">Centered by making image full height</div>
</div>
<div class="navbar" id="div2">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text" id="text2">Centered by making div same height as image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img3" />
<div class="text">Centered using manual <code>margin</code> manipulation</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img4" />
<div class="text">Centered using JS and jQuery (dynamic)</div>
</div>
In order to position two images beside each other (i.e. the two images are on the same line), I tried the following code:
<html>
<head>
<style>
#container {
width:100%;
}
img {
display:inline-block;
width:50%;
}
</style>
</head>
<body>
<h1 style="text-align:center"><strong>Test</strong></h1>
<div id="container">
<img src="Google-logo.png">
<img src="Google-logo.png">
</div>
</body>
The width of the container div should be shared equally by the two images, right? However, this does not happen and the images appear on two separate lines.
If, however, I use float:left instead, the images do appear on the same line. Why is this?
Remove the new line between the img tags:
<div>
<img src="..." alt=""><img src="..." alt="">
</div>
This happens because elements which are declared with inline or inline-block are sensitive to whitespace.
More information: on David Walsh's Blog
Commonly layouts are done with floats or flexbox instead.
Floats
/* Clearfix */
.wrapper:after {
content: '';
display: table;
clear: both;
}
.item {
float: left;
width: 50%;
height: 100px;
}
.item-1 {
background: red;
}
.item-2 {
background: blue;
}
<div class="wrapper">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
Flexbox
.wrapper {
display: flex;
}
.item {
flex: 1; /* Or use width: 50%; */
height: 100px;
}
.item-1 {
background: red;
}
.item-2 {
background: blue;
}
<div class="wrapper">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
try this code
#container {
max-width:100%;
display:flex;
}
img {
flex:1;
}
Give align property to images.
<img src="Google-logo.png" align="left">
<img src="Google-logo.png" align="left">
https://jsfiddle.net/bt2341yh/
use css float property:
img {
width:50%;
float:left;
}
see fiddle . no need of display.
Images give margins and padding so giving 50% width wont bring them in a line. Try reducing their widths or add float:left.
img{
display: inline-block;
width: 50%;
float: left;
}
According to the above solution it is very difficult to keep the page next to next line content. It will looks like minified version of our code. So try to add font-size:0 on your parent element #container. This will resolve this issue.
#container {
width:100%;
font-size:0;
}
DEMO