How do I make the image responsive and keep it in between the containers left and right.
I have tried putting it all into another container and it doesn’t work.
I know it sounds basic but it really is not.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="left"></div>
<div class="right"></div>
<img src="paintingOg.gif" style="width:50%">
How about this way? Is it (close to) what you need? Please check responsiveness too.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
.center {
height: 800px;
background-color: blue;
overflow: auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div class="center">
<img src="https://picsum.photos/500/500?gravity=west">
</div>
You don't need containers to center something.
It's better to use 1 container that contains everything.
If you want to center your image into a div just use this code:
<div align="center">
<image src="whatever.png"/>
</div>
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div align="center">
<img src="paintingOg.gif" />
</div>
Related
So I have 3 divs side by side inside the div element and another div after them. However, this div is overlapping the others. How can I make "footer" come after "main"?
.main {
height: 500px;
width: 100%;
position: absolute;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just get rid off position:absolute in your main class:
.main {
height: 500px;
width: 100%;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just remove the
position: absolute;
display: block;
from
.main
I think you will find your desired result. Please , inform if there are any other issues. Thank you.
Remove positions from main and footer.
.main {
height: 500px;
width: 100%;
float:left;
}
.footer {
height: 250px;
width: 100%;
background: black;
float:left;
}
I created three columns spread across 90% of the width page width and also centred on the page using "margin: auto". I wanted to have the three columns of equal width with equal spacing in between but was unable to achieve my desired result. How would I ago about doing this?
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
}
.c1 {
float: left;
width: 30%;
height: 70%;
background-color: green;
}
.c2 {
float: right;
width: 30%;
height: 70%;
background-color: #DDDDDD;
}
.c3{
float: right;
width: 30%;
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
You can use flex box to easily achieve this, here is the css for the desired result which also keeps it fully responsive.
here is a more detailed explanation on flex box and what you can achieve
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
display:flex;
justify-content:space-between;
}
.c1 {
width: 30%;
height: 70%;
background-color: green;
}
.c2 {
width: 30%;
height: 70%;
background-color: #DDDDDD;
}
.c3{
width: 30%;
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
You can remove float and make them as inline-block, and then center the elements present in the ColumnContainer.
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
text-align: center;
}
.ColumnContainer > div{
display:inline-block;
width:30%;
}
.c1 {
height: 70%;
background-color: green;
}
.c2 {
height: 70%;
background-color: #DDDDDD;
}
.c3{
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.
How to create this html layout using div tags? I'm trying this code. But it is not working. How should i position my leftbottom div? What is wrong on my code? Please help me......... Hurry..... thanks
<html>
<head>
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
}
.leftupper{
width: 350px;
height: 241px;
background: red;
float: left;
clear: right;
}
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.leftbottom{
width: 350px;
height: 200px;
float: left;
background-color: red
}
</style>
</head>
<body>
<div class="container">
<div class="leftupper">
</div>
<div class="gallery"></div>
<div class="leftbottom"></div>
</div>
</body>
</html>
Try to change
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
To
.gallery{
width: 630px;
height: 600px;
background: red;
float: right;
margin-left: 10px;
margin-right: 10px;
}
http://jsfiddle.net/tuekdzph/1/
You should use coloumns like this:
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
overflow: auto; /* clear floats */
}
.left { float: left; width: 350px; }
.right { float: left; width: 630px; }
.left-upper{
width: 100%;
height: 241px;
background: red;
}
.gallery{
width: 100%;
height: 600px;
background: red;
}
.left-bottom{
height: 200px;
background-color: red
}
</style>
Your HTML should look like this:
<div class="container">
<div class="left">
<div class="left-upper"></div>
<div class="left-bottom"></div>
</div>
<div class="right">
<div class="gallery"></div>
</div>
</div>
So i'm having a problem that is hard to explain. Here is the JSFiddle showing the problem :
http://jsfiddle.net/c9cwB/
CSS:
#container {
width: 400px;
height: 400px;
}
.div1 {
width: 50%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 50%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}
Html:
<div id="container">
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</div>
What I want to happen is for the blue box to sit right under the green box so it looks like a website dashboard.
How do I do this? You can change css/html to fix it.
You can float the .div3 right and add clear:left; to the .div2 to get the desired layout (You can remove the display property as it is of no use combined with floats).
I also simplified your CSS code by adding a class to both left divs and using it to style them.
DEMO
HTML :
<div id="container">
<div class="div1 left"></div>
<div class="div3"></div>
<div class="div2 left"></div>
</div>
CSS :
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
.left {
float:left;
width: 50%;
height: 50%;
}
.div1 {
background: green;
}
.div2 {
background: blue;
clear:left;
}
.div3 {
width: 50%;
background: red;
height: 100%;
float: right;
}
You have to chage the float on your div3 class.
it should be float: right; instead of float: left;
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: right;
}
How about wrapping the ones you want to the left in another layer:
http://jsfiddle.net/dactivo/c9cwB/6/
<div id="container">
<div id="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="div3"></div>
</div>
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
#wrapper{width:50%; display: inline-block;height:100%;float:left}
.div1 {
width: 100%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 100%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}
Try Demo
<div id="container">
<div class="div3 right"></div>
<div class="div1"></div>
<div class="div2"></div>
</div>
Asumming that .widget is a item/box of the dashboard you can use:
.widget {
float: left;
}
.widget:nth-child(even) {
float: right;
}
Demo: http://codepen.io/torresandres/pen/wnIxF