i want to set .span4(image) and .span8(green box) to the bottom of .row (grey box)
.row should get the size automatic because .span8 has a random height.
what i want is this result:
what i get is this:
example 1
here is .span8 not on bottom of .row but .row has a automatic height
http://jsfiddle.net/39znd/
example 2
here is .span8 on bottom of .row but .span8 is not inside of .row as you can see on post 2 and 3
http://jsfiddle.net/HZu82/
on example 2 i added to .span8 blockquote -> position:absolute;
does anyone have a hint for me?
You can use display:table;on the wrapper and display:table-cell;, vertical-align:bottom;
for your issue see this demo :
FIDDLE
HTML :
<div id="container">
<div class="table">
<div class="row clearfix">
<div class="span4">
<img src="http://lorempixel.com/290/270/people/9/" />
</div>
<div class="span8_wrap">
<div class="span8">
<blockquote class="bubble1-left">
<p>This is a blockquote</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
CSS :
#container{
width:900px; /* TOTAL WIDTH */
margin:0 auto;
padding:0 40px;
position:relative
}
.table{
display:table;
}
.row{
display:table-row;
margin:0 0 20px 0;
min-height:270px;
background:grey;
}
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}
.clearfix{zoom:1}
.span4{
display:table-cell;
vertical-align:bottom;
width:300px; /* IMG BOX */
background:grey;
}
.span4 img{
display:block;
}
.span8_wrap{
display:table-cell;
vertical-align:bottom;
}
.span8{
padding-bottom:30px;
width:600px; /* TEXT BOX */
background:green;
}
blockquote{margin:0 0 30px 0}
blockquote p{margin:0;font-size:1.25em}
.bubble1-left{
position:relative;
padding:20px;
border:3px solid #000;
text-align:center;
color:#000;
background:#fff;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
To have empty space above the green div try next things:
Insert some div to this empty place and let the green div have something like 100px height, and the div above 100% height.
Use next styles for green div: position: absolute; left: 0px; bottom: 0px; right: 0px;
Related
i have simple issue with HTML positions
in the following code i have one wrapper div> Container in this div
i have 2 more divs name is side_bar_wrap and left_wrap in left_wrap div i have
4 thumbnails divs name are same as thumbnails my issue is how can i align this 4 thumbnails div with space between right and left but no on first and last div of this group
following is my code, please help me..
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
.container
{
width:100%;
max-width:1170px;
margin:0 auto;
}
*
{
margin:0;
padding:0;
}
.side_bar_wrap
{
width:29%;
height:300px;
background:#148b23;
margin:0 10px 0 0;
float:left;
}
.left_wrap
{
width:70%;
float:right;
}
.thumbnails{
width: 22%;
margin: 0 11px;
position: relative;
overflow: hidden;
height:300px;
border:1px solid #cfcfcf;
float:left;
}
.inner_task
{
}
.clear
{
clear:both;
}
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
<div class="container">
<div style="width:29%; float:left; height:400px; background:gray; margin:40px 11px 40px 0;"></div>
<div style="width:70%;float:left; height:400px; background:gray; margin:40px 0;"></div>
<div class="side_bar_wrap"></div>
<div class="left_wrap">
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
</div>
<div style="width:100%; float:left; height:400px; background:gray; margin:40px 0;"></div>
</div>
You can use the first-child and last-child that css provides for you
Basically first-child allow you to make style changes to the first div, and last-child allows you to make changes to the last div
so something like this:
.thumnails:first-child {
/*NO SPACE ON ONE SIDE*/
margin-left:0px;
}
.thumnails:last-child {
/*NO SPACE ON ONE SIDE*/
margin-right:0px;
}
If you want advance alittle more you can use :nth-child(), for when you you want to change the style of the third div or whatever, so
.thumnails:nth-child(3) {
background-color:#ff0000;
}
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
Got problem with divs..
HTML
<div id="site-menu">menu1
<br>menu2
<br>menu3
<br>menu4
<br>menu5
<br>menu6
<br>
</div>
<div id="site-content">
<div class="site-content">
<div id="site-content-left">left</div>
<div id="site-content-right">right</div>
<div class="clear"></div>
</div>
</div>
CSS
.site-content {
background:pink;
}
#site-content {
background:red;
margin-left:250px;
}
#site-content-left {
background:orange;
float:left;
}
#site-content-right {
margin:5px 0 5px 0;
background:blue;
}
#site-menu {
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {
clear:both
}
There is gap after clear both. The gap is big as menu div height (there is something with menu div).. Any solution please?
jsFiddle.
There are basically two way you can avoid big gap..
1) Instead of clear:both use clear:right
OR
2) Define proper floats for parent and sub divs instead of using margin. Proper div structure won't give above gap..
below is the style for each divs.
.site-content{background:pink; width:100%; float:left}
#site-content{
background:red;
margin-left:250px;
}
#site-content-left{background:orange;float:left; width:5%; }
#site-content-right{margin:5px 0 5px 0;background:blue; float:right; display:block; width:95%}
#site-menu{
float:left;
width: 250px;
padding: 20px 0;
overflow:hidden;
background:grey;
}
.clear {clear:both}
clear:both makes the element drop below any floated elements that precede it in the document.
Remove margin: left from #site-content
#site-content{
background:red;
}
check this fiddle
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}
i have 3 divs conatined within an outer div. i am aligning them horizontally by floating them left. and div3 as float right
<div id="outer">
<div id="div1">always shows</div>
<div id="div2">always shows</div>
<div id="div3">sometimes shows</div>
</div>
div1 and div3 have fixed sizes.
if div3 is left out i want div 2 to fill up the remaining space. how can i do it?
What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/
CSS:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#right{
float:right;
width:50px;
background:yellow;
}
#left{
float:left;
width:50px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Body:
<div id="container">
<div id="right">div3</div>
<div id="left">div1</div>
<div id="remaining">div2, remaining</div>
</div>
This is a technique using display: table; https://jsfiddle.net/sxk509x2/
Browser support (ie 11+): http://caniuse.com/#feat=css-table
HTML
<div class="outer">
<div class="static pretty pretty-extended">$</div>
<input class="dynamic pretty" type="number" />
<div class="static pretty">.00</div>
</div>
CSS
.outer{
width:300px;
height:34px;
display:table;
position: relative;
box-sizing: border-box;
}
.static{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
}
.dynamic{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
width: 100%;
height:100%;
}
.pretty{
border: 1px solid #ccc;
padding-left: 7px;
padding-right: 7px;
font-size:16px;
}
.pretty-extended{
background: #eee;
text-align:center;
}
The classes that contain "pretty" are not required to accomplish what you are trying to do. I just added them for appearances.
You don't need to float #div2, it'll automatically fill up the remaining space.
If you want borders/padding, you ought to give #div2 a child element.