I have the following code, which displays chaotic the images . I want to display the images smaller(33.3%) in a row, all with the same width and height and below them a link, but i'm stuck . Any ideas?
<style>
h4 {
direction:ltr;
text-align:center;
}
.line {
position:relative;
width: 33%;
height:33%;
margin-right: 1%;
}
.row {
clear:both;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
</style>
<div class="row">
<div class="line">
<img src="http://www.hdwallpapersmaza.com/wp-content/uploads/2014/03/Download-Space- Background-Images-4.jpg" />
<h4>www.asite.ro</h4>
</div>
<div class="line">
<img src="https://static-secure.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/3/13/1363178656076/Google-talking-shoe-011.jpg" />
<h4>www.asite.ro</h4>
</div>
<div class="line">
<img src="http://www.wired.com/wiredenterprise/wp-content/uploads//2012/10/ff_googleinfrastructure_large.jpg" />
<h4>www.asite.ro</h4>
</div>
</div>
you just need to clean your code a bit
h4{direction:ltr;
text-align:center;}
.line{
position:relative;
width: 32%;
height:33%;
margin-right:1%;
float:left;
}
.row{
width:100%;
overflow:hidden;
}
img
{
width:100%;
height:auto;
}
http://fiddle.jshell.net/prollygeek/GsrFR/
Related
One container with four or more divs inside that line up like a perfect puzzle and the last div fills out the remaining height..
the image illustrates how it should look like
where I am at: http://jsfiddle.net/meb9h3vx/
.wrap {
float: left;
background: #fff;
width: 100%;
}
.get2 {
float: left;
height: auto;
width: 50%;
}
<div class="wrap">
<div class="get2">
<h1>1</h1>
abc
</div>
<div class="get2">
<h1>2</h1>
</div>
<div class="get2">
<h1>3</h1>
d
<br>e
</div>
<div class="get2">
<h1>4</h1>
</div>
</div>
Try using this -
remove float from both .wrap and .get2
remove text-align: center; from body css
add following css to .get2 - text-align: center; display: inline-block;
vertical-align: top;
add margin-left: -4px; css to .get2:nth-child(2) { }
and add margin-left: -4px; margin-top: -17px; css to .get2:nth-child(4)
Flexbox to the rescue with no dirty hacks:
body {
background:#000;
color:#ccc;
text-align:center;
margin:10px;
}
.wrap {
background:#fff;
width:100%;
display:flex;
flex-wrap: wrap;
height:auto;
}
.get2 {
height:auto;
width:50%;
}
.get2:nth-child(1) {
background:red;
}
.get2:nth-child(2) {
background:green;
}
.get2:nth-child(3) {
background:yellow;
}
.get2:nth-child(4) {
background:blue;
}
<div class="wrap">
<div class="get2">
<h1>1</h1>
abc
</div>
<div class="get2">
<h1>2</h1>
</div>
<div class="get2">
<h1>3</h1>
d
<br>e</div>
<div class="get2">
<h1>4</h1>
</div>
</div>
Hey you can try by giving min-height as i am giving below
.get2{
float:left;
height:auto;
width:50%;
min-height:120px
}
Fixed it! So I inline-block the div and nth-child(2n) margin-left:-4px to get rid of the white-space and vertical-align:top and then the last part I added: padding-bottom: 99999px; margin-bottom: -99999px; http://jsfiddle.net/p428b71y/1/
.wrap{
float:left;
background:#fff;
width:100%;
overflow:hidden;
}
.get2:nth-child(2n){
margin-left:-4px;
}
.get2{
vertical-align:top;
display:inline-block;
height:auto;
width:50%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
I have a container div that is not aligning properly, nor can I keep divs inside a container div aligned right or left. It keeps on coming out of the main div or container.
Here's my simple homepage design but the divs are not indenting properly according to this layout:
#container{
background-color:white;
width:100%;
height:1200px;
}
#logo{
background-color:yellow;
width:30%;
height:100px;
float:left;
}
#header{
background-color:green;
width:100%;
height:100px;
float:left;
}
#navigation{
width:100%;
height:40px;
background-color:white;
float:left;
}
#webname{
background-color:gray;
width:70%;
height:100px;
float:right;
}
#mainclass{
width:100%;
height:950px;
float:left;
}
#asideright{
background-color:red;
width:10%;
height:950px;
float:right;
}
#asideleft{
background-color:purple;
width:20%;
height:950px;
float:left;
}
#selection{
background-color:yellow;
width:70%;
height:950px;
float:center;
}
#footer{
background-color:green;
width:100%;
height:100px;
float:;left;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="webname">
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
this is your correct css
#container {
background-color: white;
width: 100%;
height: 1200px;
}
#logo {
background-color: yellow;
width: 30%;
height: 100px;
float: left;
}
#header {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
#navigation {
width: 100%;
height: 40px;
background-color: white;
float: left;
}
#webname {
background-color: gray;
width: 70%;
height: 100px;
float: right;
}
#mainclass {
width: 100%;
height: 950px;
/*float: left;*/
}
#asideright {
background-color: red;
width: 10%;
height: 950px;
float: right;
}
#asideleft {
background-color: purple;
width: 20%;
height: 950px;
float: left;
}
#selection {
background-color: yellow;
width: 70%;
height: 950px;
float: left;
}
#footer {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
There is no such property as float: center; you have to change that property for #selection to float: left;.
Please refer to this tutorial.
You can use this approach .
*
{
margin: 0;
padding: 0;
}
.container {
width: 1170px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color:red;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.inner_div
{
width: 25%;
float:left;
background-color:green;
}
.big_div
{
width: 75%;
float:left;
background-color:yellow;
}
<html>
<head>
<title id="title">DUMMY
</title>
<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
<link rel="stylesheet" type="text/css" href="dumm1.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="inner_div" style="background-color:purple;">
i'm the inner container
</div>
<div class="inner_div" style="background-color:pink;">
i'm another one
</div>
<div class="inner_div" style="background-color:green;">
another one
</div>
<div class="inner_div" style="background-color:orange;">
woho! another one
</div>
<div class="big_div">
yipee! i'm another container
</div>
<div class="inner_div" style="background-color:red;">
yehaa! i'm another container
</div>
</div>
<div id="navigation">
</div>
<div id="mainclass">
<div id="asideleft">
</div>
<div id="selection">
</div>
<div id="asideright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<style type="text/css">
.container{
position:center;
margin-left:500px;
margin-right:500px;
}
header {
height:200px;
background-color:green;
}
footer {
height:100px;
background-color:red;
}
.body {
display:flex;
flex-direction:row;
height:650px;
}
.side {
background-color:yellow;
flex:0.5;
}
.middle {
background-color:teal;
flex:2;
}
</style>
</head>
<body>
<div class="container">
<header> I'm a header idiot</header>
<div class="body">
<div class="side"> Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>SHEEEEEEEEEET</footer>
</div>
</body>
I'm trying to make a webpage that is formatted similarly to this:
The code I have currently is a very botchy, way of doing it but doesn't scale with window size and only looks good full screen relative to my screen size. What am I missing? It is supposed to be centered on the page and not have its width spread across the whole screen.
You have to remove just:
.container {
margin-left: 500px;
margin-right: 500px;
}
from your code will solved your issue.
Check Fiddle
And for getting output same as image(like center div). Give parent text-align:center;. Here body is parent so.
body{
text-align:center;
}
Check Updated Fiddle
<!DOCTYPE html>
<style>
#main{
height:500px;
width:100%;
}
#div1{
width:99%;
height:25%;
border: 2px solid;
margin-bottom:2%;
top: 30px;
}
#div2{
width:20%;
height:60%;
border: 2px solid;
margin-bottom:2%;
float:left;
}
#div3{
width:78%;
height:60%;
border: 2px solid;
margin-bottom:2%;
float:right;
}
#div4{
width:100%;
height:10%;
border: 2px solid;
float:left;
}
</style>
<body>
<div id="main">
<div id="div1">11
</div>
<div id="div2">33
</div>
<div id="div3">222
</div>
<div id="div4">
test
</div>
</div>
</body>
</html>
Description:- You jsut nedd to give margin for adjusting all layouts and need to remove (.container) Class .Below is code you can check that.
Code:-
<style type="text/css">
.body {
display:flex;
flex-direction:row;
height:650px;
}
header {
height:200px;
background-color:green;
margin:20px 20px 0px 20px;
}
footer {
height:100px;
background-color:red;
margin:15px 20px 0px 20px;
}
.side {
background-color:yellow;
flex:0.5;
margin:15px 10px 0px 20px;
}
.middle {
background-color:teal;
margin:15px 20px 0px 10px;
flex:2;
}
</style>
</head>
<body>
<div >
<header> I'm a header bitch</header>
<div class="body">
<div class="side"> Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>SHEEEEEEEEEET</footer>
</div>
</body>
Change your .container to this. You can use any width you like.
.container {
/* position:center; */
margin-left:auto;
margin-right:auto;
width:100%
}
.container {
/* position:center; */
margin-left: auto;
margin-right: auto;
width: 100%
}
header {
height: 200px;
background-color: green;
}
footer {
height: 100px;
background-color: red;
}
.body {
display: flex;
flex-direction: row;
height: 650px;
}
.side {
background-color: yellow;
flex: 0.5;
}
.middle {
background-color: teal;
flex: 2;
}
<div class="container">
<header>I'm a header</header>
<div class="body">
<div class="side">Stuff</div>
<div class="middle">More Stuff</div>
</div>
<footer>footer</footer>
</div>
I have been trying to center this image inside its div, but it keeps aligning to the left.
HTML
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
I have tried using margin: auto; and align:middle; but neither seem to work.
No need for relative/absolute positioning.
A simple way to solve this is by setting display:block on the image.
jsFiddle demo - it works perfectly.
CSS
#main #right img {
margin: 0px auto;
display: block;
}
Try this:
HTML:
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS:
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
text-align:center;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
Jsfiddle: http://jsfiddle.net/hdMEQ/
I basically just added text-align: center; property in #right id.
Try adding:
#right img {
margin:auto;
display:block;
}
JSfiddle
Will get you the dead center with variable width and height or no need to know widths, heights.
set the position absolute in relative to which div you want the center the image
#main #right img {
position:absolute;
display: block;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
#right {
position:relative;
}
<style type="text/css">
.centerDiv {
margin-right: auto;
margin-left: auto;
width: 80px;
}
</style>
<div id="main">
<div id="left">This is a test</div>
<div id="right" class="centerDiv">
<div class="centerDiv">
<h2 id="fish">Fishtail</h2>
<img height="80px" width="80px" src="http://www.w3schools.com/images/w3html.gif">
</div>
</div>
</div>
</body>
</html>
My pen: http://codepen.io/helloworld/pen/IGsoe
I want to center align all divs with the yellow border how can I do that?
I tried margin:0 auto; on the parent container but that did not help.
The "items" with the yellow border should keep their percentage width. Do not change this to fixed pixel values.
HTML code:
<div class="table">
<div id="navigationWrapper">
<div class="table">
<div id="left"><image width="40px" /></div>
<div id="navBar" style="width:100%; height: 100px; background-color: grey;">
<div class="cellContainer">
<div class="alarmTemplate">A</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">B</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">C</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">D</div>
</div>
</div>
<div id="right"><image width="40px" /></div>
</div>
</div>
<div id="navigationWheeler">test</div>
</div>
CSS:
body {
padding: 0;
margin: 0;
width:100%;
height:100%;
}
.cellContainer {
margin:0 auto;
width: 20%;
float: left;
background:black;
}
.alarmTemplate{
height:80px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
background:lightgray;
border:yellow solid 2px;
}
#navBar, #right, #left, #navigationWheeler {
height:80px;
background:yellow;
display:table-cell;
vertical-align:middle;
}
.table {
display:table;
min-width:100%;
margin:0 auto;
}
#right, #left, #navigationWheeler {
width:40px;
}
#navigationWheeler{
background:green;
text-align:center;
}
To center the four DIVs set them to
.cellContainer {
float: none;
display: inline-block;
}
and center the navbar contents
#navBar {
text-align: center;
}
Demo Link with corrected css
.cellContainer {
margin:0 auto;
width: 20%;
/*float: left;*/
background:black;
display: inline-block;
}
#navBar{
text-align: center;
}