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/
Related
in my HTML code, I have some rows and div, but one div is shown before another, even if in the code is after. Div with class "contact" is shown before div with class "photos"
Photo: https://imgur.com/a/Y8BGQIM
<div class="photos">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Galerie Foto</div>
</div>
<div class="gallery">
<img src="background1.jpeg" alt="Cinque Terre">
</div>
<div class="gallery">
<img src="galerie1.jfif" alt="Forest">
</div>
<div class="gallery">
<img src="galerie2.jfif" alt="Northern Lights">
</div>
<div class="gallery">
<img src="galerie3.jfif" alt="Mountains">
</div>
</div>
<div class="contact">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Contact</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6 section-subheading">
<h1><br>
<br>
</h1>
</div>
</div>
</div>
And the css code that I applied to the divs:
.photos{
width: 100%;
position: absolute;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
position: absolute;
background-color: black;
}
Hope deleting or commenting position: absolute in both the places will give you expected result.
Give a try. to below CSS
.photos{
width: 100%;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
}
Position absolute will position both divs on top of one another at the top of the page if no other styling positions then differently. Remove the position absolute it is not needed here and add a float left to your photos class and your contact class so that the divs fall in order under one another because your gallery has a float left set.
.photos{
width: 100%;
float:left;
background-color: green;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
float:left;
}
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
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>
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>