This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
2 columns div for ie8 and ie7
in my website, I need to add inside a <div> (the black square, which is sort of a container) two columns of <div>s. you can understand it more easily from the drawing I attached.
it should:
support major browsers (Explorer 6 not needed)
be relatively simple
change the space size between the two columns, easily.
change the <div>s horizonal position.
Much thanks.
<style type="text/css">
#black {height:600px;width:500px;border:2px solid #000000;}
#black div{height:80px;width:150px;margin-top:20px;}
.green {border:2px solid #009900;float:left;margin-left:60px;}
.red{border: 2px solid #FF0000;float:right;margin-right:60px;}
</style>
<div id="black">
<div class="green"></div> <div class="red"></div>
<div class="green"></div> <div class="red"></div>
<div class="green"></div> <div class="red"></div>
<div class="green"></div> <div class="red"></div>
</div>
HTML
<div class="container">
<div class="box col1"></div>
<div class="box col2"></div>
<div class="box col1"></div>
<div class="box col2"></div>
<div class="box col1"></div>
<div class="box col2"></div>
</div>
CSS
.container {width:100%; padding: 50px; border:2px solid #000; float: left;}
.box {width:100px;height:100px;margin: 10px;}
.col1 {border:2px solid red;float:left;clear:left;}
.col2 {border:2px solid green;float:left;}
Modify the .box padding to change the space size between the two columns
Modify the .container padding to change the horizonal position for the columns inside the container.
JSFiddle : http://jsfiddle.net/reB7v/
Try with this :
<style>
.outer{width:100%; padding: 20px; border:1px solid #000; float: left;}
.red{width: 20%; height: 40px; border:2px solid red; float: left; margin: 20px;}
.green{width: 20%; height: 40px; border:2px solid green; float: left; margin: 20px;}
.clear{clear:both;}
</style>
<div class="outer">
<div class="red"></div>
<div class="green"></div>
<div class="clear"></div>
<div class="red"></div>
<div class="green"></div>
</div>
Hope it will help you.
nesting columns could be devided into Grid system and Fluid grid system.
You can get info from Bootstrap and copy its nesting columns CSS.
Related
I am trying to understand Bootstrap, however - I can't figure out why this ain't working on xs. I have a total of 12 columns, but it still puts the col-xs-11 beneath the col-xs-1.
CSS:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
Result on xs:
with border-css
without border-css
Could someone tell me what I am missing here? The 2-8-2 is working properly, but the 1-11 not.
I am working on the latest version of Firefox + I am using Bootstrap version 3, not 4.
Edit 1:
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
What's happening is that your col-xs-1 column is reaching its minimum width based on its padding and content, and can't go any smaller. This means the col-xs-11 doesn't have enough space and is being pushed to the next line.
The problem is that the cols have 15px left & right padding so even if it was empty you col can't go any smaller than 30px.
Usually you would redistribute the cols on the smallest screen to allocate more space for the smallest cols, e.g.
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
However if that isn't an option, you could use media queries to adjust the padding for smaller screens, e.g.:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
#media (max-width: 400px){
[class^="col-"] {
padding-left:5px;
padding-right:5px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
(Note, the media query isn't working in the snippet for some reason, but this code does work in a standalone html page!)
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
I'm having a small HTML/CSS Bootstrap problem here. Basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
.cent{
text-align:center;
margin:auto;
width:auto;
}
.section {
padding-top:20px;
margin:auto;
}
.team {
text-align:center;
margin:auto;
max-width:600px;!important
padding-left:20px;!important
padding-right:20px;!important
}
.profile {
max-width:200px;
text-align:center;
margin:auto;
padding-top:10px;
}
.pro {
padding-left:100px;!important
}
.box {
background:#FFF;
border:1px solid #CCC;
box-shadow: 0px 1px 1px #CCC;
padding: 0px 20px 20px 0px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height:220px;
}
Now the only thing I want to do is invert the code so that the picture is now on the left and the description on the right but it seems when I do that the span4 does not go on the side of the span8 but instead under it.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
You have a lot of unnecessary code in there. Maybe this is not exactly what you are looking for but instead of trying to figure out the code you provided, I just started fresh and provided a much cleaner way of doing what you want to accomplish.
You should modify your question as you ask for what already is. At the top you say: "basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side." but then down below you say "now the only thing I want to do is invert the code so that the picture is now on the left and the description on the rite but it seems when I do that the span4 does not go on the side of the span8 but instead under it."
the key is to use the "float" property.
here is the html:
<div class="container">
<div class="span4">
<img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
</div>
<div class="span8">
<div class="span8-text">
<h3>Title</h3>
<p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div>
</div>
</div>
and the css:
.container {
position: relative;
clear: both;
text-align: center;
}
.span4 {
float: right;
width: 200px;
}
.span8 {
position: relative;
float: left;
width: 350px;
}
here is the jsfiddle: http://jsfiddle.net/h69Bh/
Use CSS float property span8 float:left and span4 float:right
Take a look DEMO
This is it:
add this in head section below all links to bootstrap cdn :
<style>
img{
width: 100%;
height: 100%;
}
</style>
and this in body tag:
<div class="container img-responsive">
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
description goes here
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img src="1.jpg">
</div>
</div>
<div>
check responsiveness:https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/
this problem has been bothering me for some time. So I have created some visual descriptions of my problem
First here is my HTML structure I have 6 divs.. the first 3 float left and the last 3 float right. The last image shows the result I want but can't seem to get. Can someone out there help me here
EDIT// Sorry heres my HTML and CSS
<style>
.left { float:left; }
.right { float:right; }
</style>
<div id="container">
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
</div>
NOTE: I Cant do a left right left right left right option because Im getting my data from PHP via a Query to my database.. first query goes left second query goes right.... thanks a bunch
/EDIT
My floats result in this
This is what I want
Float one left , one right, and give first the clear:both property
<div class="left clear"></div>
<div class="right"></div>
<div class="left clear"></div>
<div class="right"></div>
css
.left {float:left}
.right {float:right}
.clear {clear:both}
Example
You can use CSS3 column-count property for this. Write like this:
.parent{
-moz-column-count: 2;
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 2;
column-gap: 50%;
}
.parent div{
width:50px;
height:50px;
margin:10px;
}
.left{
background:red;
}
.right{
background:green;
}
Check this http://jsfiddle.net/UaFFP/6/
Add the first left div, then the first right div and after them add <br style="clear:both"> and repeat the procedure.
Edit: Here's an updated answer:
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
Suppose you have another div in the middle of them. Then use this chronological order:
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
Or if you don't, just add another div that provide a style clear:both to it.
<style type="text/css">
.parent {width:50px; border:1px solid red;}
.left {float:left; }
.right{float:right;}
.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;}
</style>
<body>
<div class="left parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="right parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
Mind it would be odd not to have a central DIV, if that is a case float the parent DIVs left, at say widths of 20% 60% 20%.
column-count is already widely supported - http://caniuse.com/#feat=multicolumn
So if old browsers doesn't bother you consider using it.
Try this:
.leftcolums {
float: left;
}
.rightcolums {
float: right;
}
.clear {
clear: both;
}
<div class="leftcolums">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
</div>
<div class="rightcolums">
<div class="right">4</div>
<div class="right">5</div>
<div class="right">6</div>
</div>
<div class="clear">7</div>
Using the :nth-child selector and clearing after 2 divs:
div {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
div:nth-child(2n) {
background-color: green;
float: right;
}
Live example
Otherwise use this fairly hacky method, which requires no additional markup:
div {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
div:nth-child(n) {
clear: both;
}
div:nth-child(2n) {
background-color: green;
float: right;
margin-top: -50px; //match this to the div height
}
Live example