I have the following html and I am very confused about the following:
The .rowNumber & the .title will be the same height throughout all three boxes
The .rowNumberItems will not have the same amount of content in each column
How can I using CSS equal the columns so that my .button div is equal throughout all columns?
My columns are height:200px; by width:195px;
Example Column :
<div id="priceTable">
<div class="rowOne">
<p class="title">Name</p>
<ul class="rowOneItems">
<li>Custom Design</li>
</ul>
<div class="button">Buy Now</div>
</div> <!-- Column One -->
</div>
Current CSS:
#priceTable{
width:780px;
height:230px;
margin:0 auto;
overflow:hidden;
background:gray;
}
.rowOne, .rowTwo, .rowThree{
float:left;
height:225px;
width:195px;
margin:0 40px 0 0;
background:red;
}
#priceTable .title{
font-weight:bold;
text-align:center;
color:#000;
}
#priceTable .button{
background:green;
background:url('../images/button.png') no-repeat;
}
Fiddle: http://jsfiddle.net/iambriansreed/ZJhPq/
Add the following CSS:
.rowOne, .rowTwo, .rowThree {
position: relative;
}
#priceTable .button {
position: absolute;
bottom: 0;
}
Could you set the .rowNumberItems to certain height and overflow: hidden? Once the height of the rowNumberItems is fixed, the button locations would be equal.
.rowOneItems{height:200px;overflow:hidden;}
For example: http://jsfiddle.net/3bmrZ/
Related
I'm trying to place submenu right below its's choosing option like this but when I set left and right attributes on 0
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:0;
right:0;
}
it has whole site's width. When I set them on auto it looks like this.
How do I place my submenu exactly below this div or, what would look even cooler, on it's right?
Code (whole JSFiddle in comments):
HTML:
<div id="sidebar">
<div class="sidebar_option">Strona główna</div>
<div class="sidebar_option">Galeria</div>
<div class="sidebar_option">Reżyserzy
<div class="sidebar_wrapper">
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="sidebar_option">Ulubione filmy</div>
<div class="sidebar_option">Seriale</div>
<div class="sidebar_option">Kontakt</div>
</div>
CSS:
.submenu
{
text-align:center;
border-bottom:dotted 2px black;
padding-top:10px;
padding-bottom:10px;
display:none;
font-size:13px;
}
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:auto;
right:auto;
}
.sidebar_option:hover div
{
display:block;
}
.sidebar_option:hover
{
background-color:lightgray;
cursor:pointer;
}
.sidebar_option
{
text-align:center;
margin:10px;
padding:10px;
border-bottom:dotted 2px black;
}
I think the key is you need to set the position of the sidebar_option to relative so that the submenu_wrapper will be position in relation to the sidebar instead of the window. Then some value for left and right for the submenu. It can be anything, but if you want it centered they need to be the same.
.sidebar_option {
position: relative;
}
.sidebar_wrapper {
position: absolute;
background-color:lightgray;
left: 5%;
right: 5%;
z-index: 2;
}
Here's the updated jfiddle: https://jsfiddle.net/8d3p50hy/13/
The image shows what I want to accomplish:
Here is the code that I have:
http://jsfiddle.net/ZNtKj/202/
<div style="width: 200px" >
<div class="niveles-porcentaje">
<div class="alta" style="width: 40%"> <span class="porcentaje">40%</span></div>
</div>
And the style I am having trouble to fix:
div.niveles-porcentaje {
width:100%;
height:100%;
align-self:center;
text-align:center;
display:inline-table;
background-color:#D7D7D7;
}
div.alta {
display:inline-table; /*inside a table*/
line-height: 2em;
background-color: #06AC09;
height:100%;
float:left;
}
span.porcentaje{
text-align:center;
vertical-align:middle;
z-index:99;
}
The div will be inside a td.
You will have to make the text's parent full width. To do that, remove the back color and width definition from the .alta div, and create an inner absolute div to deal with the color fill, that won't interfeer with the text.
Also, remember to set the text span to display: block to be full width. Check here: http://jsfiddle.net/ZNtKj/209/
<div style="width: 200px" >
<div class="niveles-porcentaje">
<div class="alta">
<div class="fill" style="width: 40%"></div>
<span class="porcentaje">40%</span>
</div>
</div>
</div>
CSS:
div.niveles-porcentaje {
width:100%;
height:100%;
align-self:center;
text-align:center;
display:inline-table;
background-color:#D7D7D7;
}
div.alta {
display:inline-table; /*inside a table*/
line-height: 2em;
height:100%;
width: 100%;
position: relative;
}
div.alta .fill {
background-color: #06AC09;
height:100%;
position: absolute;
}
span.porcentaje{
text-align:center;
vertical-align:middle;
z-index:99;
position: relative;
display: block;
}
Here is the Fiddle with example. You can simply change the text div width to see the result.
div.niveles-porcentaje {
width:100%;
height:20px;
align-self:center;
text-align:center;
background-color:#D7D7D7;
position:relative;
}
div.alta {
line-height: 2em;
background-color: #06AC09;
height:20px;
float:left;
position:relative;
}
span.porcentaje{
position:absolute;
left:46%;
top:0;
}
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;
I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/
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;
}