I'm trying to place 6 divs with different height on 3 columns.
I use float property for divs on the left and on the right and margin: 0 auto for central divs.
Using clear property I placed second row of divs under the first one, but I want each div is under the div with the same float option without blank space between them.
Instead they are aligned the lowest div.
Here's the fiddle: fiddle
div {
border: 1px solid red;
width: 30%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left" style="clear:left">left-bottom</div>
<div class="right" style="clear:right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Thanks for help,
Piero.
You can try this one.
Html Code
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left">left-bottom</div>
<div class="clearfix"></div>
<div class="right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Css Code
.left, .right, .center {border: 1px solid red;width: 30%;margin:2px;}
.clearfix{clear:both;}
.left {float:left;}
.right { float:left;}
.center {float:left;}
check fiddle https://jsfiddle.net/Dhavalr/9cyq8tu9/
Put them in 3 columns/DIVs 33.33% wide which you float:
https://jsfiddle.net/8Lbc5pq7/4/
HTML:
<div class="column">
<div class="left">left-top</div>
<div class="left">left-bottom</div>
</div>
<div class="column">
<div class="center">center-top</div>
<div class="center">center-bottom</div>
</div>
<div class="column">
<div class="right">right-top</div>
<div class="right" style="clear:right">right-bottom</div>
</div>
CSS:
div {
border: 1px solid red;
width: 95%;
}
.column {
float: left;
border: none;
width: 33.33%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
try using this style:
div {
border: 1px solid red;
width: 30%;
display:inline-block;
}
.left {
float: left;
height: 200px;
}
.center {
margin: 0 auto;
height: 50px;
}
Please try this code
<style>
div {
border: 1px solid gray;
width: 33.1%;
}
.left {
float: left;
height: 200px;
}
.right {
float: left;
height: 100px;
}
.center {
margin: 0 auto;
float:left;
height: 50px;
}
</style>
<div class="left">left-top</div>
<div class="center">center-top</div>
<div class="right">right-top</div>
<div style="clear:both;"></div>
<div class="left" style="clear:left;">left-bottom</div>
<div class="center">center-bottom</div>
<div class="right" style="clear:right;">right-bottom</div>
Related
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>
I often do the width hack 49% and border 1px to do seperator for 2 column. It worked, just like the below demo. But is there any better way of doing it? I want to avoid this 49% hack, because when the viewport shrink to a larger or smaller size, it's obvious and the design will break.
body{
margin:0;
}
.left {
background: #eee;
float: left;
width: 49%;
border-right:1px solid #333;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
You can use box-sizing
CSS
body {
margin:0;
}
.left {
background: #eee;
float: left;
width: 50%;
border-right:1px solid #333;
box-sizing:border-box;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
HTML
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
DEMO HERE
I have following html code
<div id="main">
<div id="content">
<h1>Title text</h1>
<div style="width: 100px; height: 100px; background: red"></div>
</div>
<div id="right">
<h2>Right title</h2>
</div>
</div>
And css
#main {
width: 230px
}
#content {
float: left;
width: 150px;
}
#right {
float: right;
width: 80px;
}
#right h2 {
margin-top: 1em;
}
I want Right title to be aligned with top of red square. The problem is that Title text can be long and text will be placed on two lines.
Can I achieve this using only css?
http://jsfiddle.net/6Rpkh/312/
I change CSS and structure of html, i put div #right,#right1 into the content and set margin-top negative
CSS
#content, #content1 {
float: left;
width: 185px;
}
#right, #right1 {
float: right;
width: 80px;
margin-top:-105px;
}
#right h2, #right1 h2 {
margin-top: 0em;
}
HTML
<div id="main">
<div id="content">
<h1>Title text</h1>
<div style="width: 100px; height: 100px; background: red"></div>
<div id="right">
<h2>Right title</h2>
</div>
</div>
</div>
<br style="clear: both"><br><br>
<div id="main1">
<div id="content1">
<h1>Very long title text on two lines</h1>
<div style="width: 100px; height: 100px; background: red"></div>
<div id="right1">
<h2>Right title</h2>
</div>
</div>
</div>
http://jsfiddle.net/6Rpkh/313/
maybe remake the structure to have 3 sections: header, left and content, instead of left and content only:
http://jsfiddle.net/78Lczwoq/
.square {
float: left;
background: red;
width: 100px;
height: 100px;
}
.header {
margin-bottom: 20px;
}
.media {
margin: 20px;
padding: 20px;
border: solid 1px #ccc;
overflow: hidden;
}
.left {
float: left;
}
.content {
overflow: hidden;
padding-left: 10px;
}
You actually need to modify your html. Check the below fiddle:
#main, #main1 {
width: 230px
}
#content, #content1 {
width: 150px;
}
#right, #right1 {
float: right;
width: 80px;
}
#right h2, #right1 h2, .box {
display: inline-block;
vertical-align: top;
}
Working Fiddle
Here is the code that works perfect as per you requirement.
HTML
<div id="main">
<div id="inner_container">
<p class="top_title">Some long title here it automatically adjusts</p>
<div class="sq_box">
</div>
<div class="right_title">
hello
</div>
</div>
</div>
CSS
#main{
width:400px;
height:200px;
}
#inner_container{
width:100%;
height:auto;
}
p.top_title{
width: 100px;
word-wrap: break-word;
}
.sq_box{
width:100px;
float:left;
height:100px;
background-color:red;
}
.right_title{
float:left;
margin-left:10%;
}
JSFILDLE demo
This adjusts itself no need to care about any margin.. its robust ..
how can I display the given html structure while all divs has float: left ?
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
This is how i did it.
div {
margin: 10px;
overflow: auto;
display: inline;
clear: none;
float: left;
}
#container {
max-width: 390px;
display: block;
}
#d1 {
background: red;
width: 200px;
height: 100px;
}
#d2 {
background: blue;
width: 150px;
height: 150px;
float: right;
}
#d3 {
background: green;
width: 200px;
height: 150px;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
Just needs the second element to be floated right within a container div.
I'm sorry this answer is vague, but it's only as vague as your question. An example of how this could be done is below:
#container {
float: left;
}
#d1 {
width: 200px;
height: 100px;
background: blue;
}
#d2 {
width: 200px;
height: 100px;
background: green;
}
#d3 {
width: 100px;
height: 200px;
background: red;
float: left;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
</div>
<div id="d3"></div>
I hope you get some inspiration . . .
You put a container div around div one and three
#container
{
width:80%;
float:left;
}
#three
{
width:20%;
float:left;
background-color:blue;
height:600px;
}
#one, #two
{
background-color:green;
margin:10px 10px;
height:300px;
}
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="three">3</div>
Regardless of what I've tried, I cannot get my inner divs to flow horizonatally within the outer div. Please help!!!
<style type="text/css">
#gallery {
width: 688px;
height: 360px;
border: solid;
}
#galleryelements {
width: 650px;
height: 320px;
display:inline;
background-color:#0FF;
}
.s-thumbnail {
width: 50px;
height: 75px;
border: solid;
}
.thumbnail {
width: 100px;
height: 150px;
border: solid;
}
#left {
float:left;
}
#right {
float:right;
}
#Mimage {
width: 200px;
height: 300px;
border: solid;
}
</style>
<body>
<div id="gallery">
<div id="galleryelements">
<div class="s-thumbnail" id="left"></div>
<div class="thumbnail" id="left"></div>
<div id="Mimage"></div>
<div class="thumbnail" id="right"></div>
<div class="s-thumbnail" id="right"></div>
</div>
</div>
</body>
</html>
is this what you mean?
http://jsfiddle.net/SebastianPataneMasuelli/xtdsv/
HTML:
<div id="gallery">
<div id="galleryelements">
<div class="s-thumbnail left" id=""></div>
<div class="thumbnail left" id="left"></div>
<div id="Mimage"></div>
<div class="thumbnail right" id=""></div>
<div class="s-thumbnail right" id=""></div>
</div>
</div>
CSS:
#gallery {
width: 688px;
height: 360px;
border: 1px solid red;
}
#galleryelements {
width: 650px;
height: 320px;
background-color:#0FF;
display: block;
}
.s-thumbnail {
width: 50px;
height: 75px;
border: solid;
}
.thumbnail {
width: 100px;
height: 150px;
border: solid;
}
.left {
float:left;
}
.right {
float:left;
}
#Mimage {
width: 200px;
height: 300px;
border: 1px solid green;
float: left;
}
You should never have more than one element on the page with the same ID.
Try <div class="s-thumbnail left"></div>
<div class="thumbnail left"></div>
<div id="Mimage"></div>
<div class="thumbnail right"></div>
<div class="s-thumbnail right"></div>and then change your CSS from #left and #right to .left and .right.
div#Mimage needs to be floated, else it will span the entire width and push the other floats down.
It would appear that you have your classes and id's mixed up. You are re-using the left and right ids. You probably want a float on Mimage too to make it display horizontally.
I changed your code slightly, is this what the result should look like?
http://jsfiddle.net/WcEAb/1/