six divs - 1 2 3 4 5 6 ....I want div number 2 4 6 to be below divs 1 3 5. Is that possible? Sorry if my explanation is that good. It's kind of hard. Thanks.
http://jsfiddle.net/LkGV8/
<body>
<div class="contain">
<div class="square">
</div>
<div class="rec01">
</div>
<div class="square">
</div>
<div class="rec02">
</div>
<div class="square">
</div>
<div class="rec03">
</div>
</div>
</body>
.contain {
border:1px solid;
width:639px;
height:900px;
background-color:;
}
.square {
width:33%;
height:50px;
float:left;
background-color:grey;
}
.rec01 {
width:100%;
height:50px;
float:right;
background-color:black;
}
.rec02 {
width:100%;
height:50px;
float:right;
background-color:black;
}
.rec03 {
width:100%;
height:50px;
float:right;
background-color:black;
}
(add more details, don't pay attention this.)
DEMO
Not sure if this is what you mean.
Remove float from .square and add display:inline-block to it
.square {
width:32%;
height:50px;
display:inline-block;
background-color:grey;
}
Can't you just shuffle the elements in the markup the way you want them? You can do it with some jQuery.
// not a pretty solution, but should work...
$( ".rec01" ).insertBefore( ".square:eq(0)" );
$( ".rec02" ).insertBefore( ".square:eq(1)" );
$( ".rec03" ).insertBefore( ".square:eq(2)" );
Your question needs an image with how you want the final version to look. This answer is assuming you want the elements 2, 4 and 6 below 1, 3 and 5 respectively.
The answer could be: use a grid.
<h3>Option 1</h3>
<div class="grid">
<div>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</div>
<h3>Option 2</h3>
<div class="grid">
<div>
<div class="grid">
<div>1</div>
<div>3</div>
<div>5</div>
</div>
<div class="grid">
<div>2</div>
<div>4</div>
<div>6</div>
</div>
</div>
</div>
The css and visual is available on JSFiddle.
You can use :nth child as provided in this js fiddle.
As follows:
.contain div:nth-child(odd) {
position:relative;
top:0;
}
.contain div:nth-child(even) {
position:relative;
top:220px;
}
Related
I am having a problem on displaying 3 Bootstrap columns in the ContentArea.
When I use Developer tools I can find them, they are at the bottom of the ContentArea, out of sight. I have tried adding the top attribute, and even the margin-top attribute but can't get those columns to move up into view in the ContentArea.
Can someone point out to me where I am going wrong?
$(document).ready(function () {
$('#menu-toggle').toggleClass('menu-hidden');
$('#menu-toggle').on('click', function () {
//alert();
$('#SidebarWrapper').toggleClass('menu-hidden');
$('#ContentArea').toggleClass('content-grew');
$('#SubCategories').toggleClass('slide-left');
});
});
body {
}
#TheLayoutContainer {
position:fixed;
z-index:1000;
width:100%;
height:100%;
border:1px solid black;
background-color:pink;
left:0px;
}
#menu-toggle {
}
#SidebarWrapper {
width:200px;
height:100%;
margin-top:0;
margin-left:0;
position:fixed;
z-index:2000;
background-color:black;
transition:1s;
}
#SidebarWrapper.menu-hidden {
width:50px;
transition:1s;
}
#ContentArea {
position: relative;
height: 100%;
background-color: purple;
z-index: 2000;
left: 325px;
margin-top:0px;
transition:1s;
padding-right:20px;
}
#ContentArea #SubCategories {
margin-left:-125px;
width:125px;
height:100%;
border:1px solid #72cad3;
background-color:#72cad3;
}
#SubCategories.slide-left {
margin-left:-75px;
width:125px;
height:100%;
border:1px solid #72cad3;
background-color:#72cad3;
}
#ContentArea.content-grew {
height: 100%;
left: 175px;
transition:1s;
}
#HeaderControlMenu {
height:45px;
width:100%;
background-color:yellow;
top:0px;
position:fixed;
z-index:2000;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div id="HeaderControlMenu">
<button id="menu-toggle" class="btn btn-success">Click</button>
</div>
</div>
<div id="TheLayoutContainer">
<div id="SidebarWrapper">
</div>
<div id="ContentArea">
<div id="SubCategories">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">A</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">B</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">C</div>
</div>
</div>
</div>
In addition to what #Temani Afif said, you need to enclose the parent (element that contains the rows) in an element with class container.
<div class="container">
<div class="row">
<div id="HeaderControlMenu">
<button id="menu-toggle" class="btn btn-success">Click</button>
</div>
</div>
<div class="row">
<div id="TheLayoutContainer">
<div id="SidebarWrapper">
</div>
<div id="ContentArea">
<div id="SubCategories">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">A</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">B</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">C</div>
</div>
</div>
</div>
</div>
</div>
Here is a fiddle
https://getbootstrap.com/docs/4.0/layout/grid/
Because none of the other answers and comments have mentioned all of the mistakes in your code, I will do that in my answer:
Don't use "naked" rows in Bootstrap. Do this instead: If you need a full-width container, use a div (or another suitable element like section etc.) with the class .container-fluid. Otherwise, use a div with the class .container and put your row(s) inside that container.
A Bootstrap .row must always have at least one Bootstrap column (.col-*) inside and all of your content must reside inside columns. Don't put any content directly into a .row.
.col-xs-* classes don't exist in Bootstrap 4 (anymore). Use .col-* instead.
Replace col-lg-12 col-md-12 col-sm-12 col-xs-12 with col-12 because that will do the exact same job. (because Bootstrap 4 is "mobile-first")
Replace col-md-4 col-lg-4 col-sm-4 col-xs-4 with col-4 because that will do the exact same job.
Side note: You can put some content directly into a Bootstrap .container or .container-fluid i.e. without using Bootstrap rows and columns. However, that would make sense only in a few special cases because usually your content wouldn't be responsive if you'd do that. The exceptions to this rule are things like Bootstrap navbars and jumbotrons.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I want to make the line 3 containing img element also in green, how to do?
<div style="padding-top:5px;">
<div class="right">line 1</div>
<div class="right">line 2</div>
<div class="right">
<img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img>
</div>
<div class="right">line 4</div>
<div class="right">line 5</div>
</div>
.right {
background-color: red;
}
.right > img {
background-color: green;
}
fiddle
ps. the IMG element appears dynamically, it is not predictable ..
The solution with jquery >> solution
$("img.img-thumbnail").parents('div.right').css("background-color", "green");
jsfiddle demo
//HTML
<div class="wrapper">
<div class="right">line 1</div>
<div class="right">line 2</div>
<div class="right">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img>
</div>
</div>
<div class="right">line 4</div>
<div class="right">line 5</div>
</div>
//CSS
.wrapper{
padding-top:5px;
background-color: red;
}
.right {
width: 100%;
}
.image {
background-color: green;
}
Edit:
OP was ok with a jQuery solution, and managed to find that answer himself
$("img.img-thumbnail").parents('div.right').css("background-color", "green");
Alternativ solution is also;
$("img.img-thumbnail").parents('div.right').addClass('green');
//CSS
.green {
background-color: green;
}
Add the following css:
.right:nth-child(3) {
background-color:green;
}
http://jsfiddle.net/wqf9p56a/
With Bootstrap 3, I'm trying to make an image stay within the boundaries of it's parent div.
This works fine for width, but no matter what I try, the image keeps falling out of the bottom of the parent div, because it's height doesn't update when I decrease browser height. Is it possible to make this work ? If so, how ? Thanks.
JSFiddle : http://jsfiddle.net/rensdenobel/9486t/
HTML :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 center">
<div class="content">
<div id="text">You chose this photo :</div>
<div id="thumbnail-container">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
<div id="button-share">
<button class="btn btn-success">Share it !</button>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div>
</div>
CSS :
html, body {
height:100%;
}
.container {
height:100%;
width:100%;
border:1px solid blue;
}
.row {
border:1px solid green;
height:100%;
}
.center {
display:table;
border:1px solid red;
padding-top:12px;
padding-bottom:12px;
text-align:center;
height:100%;
max-height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
height:auto;
border:1px solid green;
}
#thumbnail-image {
margin-left:auto;
margin-right:auto;
height:auto;
}
#thumbnail-container{
width:100%;
border:1px solid pink;
max-height:70%;
height:70%;
margin-top:12px;
margin-bottom:12px;
}
try
<div id="thumbnail-container col-sm-4 col-xs-4">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
change the col-sm-* and col-xs-* to get your desired output
This approach works for me. Please try adding this to your css:
.container {
height:max-content;
}
Here's the jsFiddle: http://jsfiddle.net/RkMFK/
Here's the html and css:
<div class="cont">
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div class="item">eleven</div>
<div class="item">twelve</div>
<div class="item">thirteen</div>
<div class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
<div class="island"></div>
</div>
.cont {
width: 240px;
height: 160px;
background-color:blue;
position:relative;
overflow:hidden;
}
.island {
position:absolute;
top:50px;
left:80px;
width:40px;
height:40px;
background-color:red;
}
.item {
float:left;
display:inline;
position:relative;
height:20px;
margin:2px;
padding: 0 10px;
background-color:yellow;
overflow:hidden;
}
How can I make the yellow items flow around the red "island" with css?
Summary: I have a container div of a fixed dimension. Somewhere within it is a small "island" div at a specific location (currently positioned absolutely, which removes it from the flow). How can I fill the container with a number of small elements of unknown width that surround the island? Any way to do this with css only? I'm stuck.
May be you want some what like in this fiddle . If i am lagging some where please let me know. so i can work out..
code:html
<div class="cont">
<div class="island"></div>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div style="margin:0 20px" class="item">eleven</div>
<div style="margin:0 25px" class="item">twelve</div>
<div class="item">thirteen</div>
<div style="margin-left:58px;" class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
</div>
I've been going through documentation, tutorials and examples. But I can't seem to get these 4 boxes to align properly no matter what I do.
div#frontpage{width:100%; }
div#1{width:25%; float:left; position:relative;}
div#2{width:25%; float:left; position:relative;}
div#3{width:25%; float:right; position:relative;}
div#4{width:25%; float:right; position:relative;}
.clear{clear:both;}
<div id="frontpage">
<div id="1">
</div>
<div id"2">
</div>
<div id="3">
</div>
<div id="4">
</div>
<div class="clear">
</div>
</div>
This is what I came up so far and the closest result I want to achieve. Get them to all align horizontal straight across one row. The reason why I use % instead of px is because my wordpress theme is responsive.
Just tweaked it a bit and it works fine.
CSS
div#frontpage{width:100%; }
div.box{width:25%; float:left; position:relative;}
.clear{clear:both;}
HTML
<div id="frontpage">
<div class="box">
a
</div>
<div class="box">
s
</div>
<div class="box">
d
</div>
<div class="box">
f
</div>
<div class="clear">
</div>
</div>
As mentioned by Phil, Ids should not be numbers. Also, your <div id"2"> should have been <div id="2"> (missing '=' sign)
see this working example http://jsfiddle.net/QFMXx/
change Id's in your code. Id's shouldn't start with digits
<div id="frontpage">
<div id="d1">sfdfs
</div>
<div id="d2">dfsdf
</div>
<div id="d3">dsfsdf
</div>
<div id="d4">dfsfsd
</div>
<div class="clear">sdfsd
</div>
</div>
and css:
div#frontpage{width:100%; }
div#d1{width:25%; float:left; position:relative;}
div#d2{width:25%; float:left; position:relative;}
div#d3{width:25%; float:right; position:relative;}
div#d4{width:25%; float:right; position:relative;}
.clear{clear:both;}
I have modified your code little bit and got the result. Could you please try this?
<style>div#frontpage{width:100%; height:50%;border:1px solid red }
div.s1{width:25%; height:50%;float:left; position:relative;border:1px solid blue;clear:both}
.clear{clear:both;}
</style>
<div id="frontpage">
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="clear">
</div>
</div>
</div>
Hope this helps.
--Felix
Id must not start with a number. and maybe you can use the following style
<style>
div#frontpage{width:100%;background-color:#ccc; }
div#a1{width:25%; float:left; position:relative;background-color:red;margin-right:75%;}
div#a2{width:25%; float:left; position:relative;background-color:#ffccea;margin:0 50% 0 -75%}
div#a3{width:25%; float:right; position:relative;background-color:blue;margin:0 25% 0 -50%}
div#a4{width:25%; float:right; position:relative;background-color:yellow;margin:0 0 0 -25%}
.clear{clear:both;}
</style>
I used a margin to the right to push away all the elements and a negetive margin to the left to pull up my desired elements.
div#frontpage{width:100%; position:relative;}
div#a{width:25%; float:left; }
div#b{width:25%; float:left; }
div#c{width:25%; float:right;}
div#d{width:25%; float:right;}
.clear{clear:both;}
<div id="frontpage">
<div id="a"></div>
<div id"b"></div>
<div id="c"></div>
<div id="d"></div>
<div class="clear"></div>
</div>
I am not sure,