i'm having 3 containers with not the same height and i want to stack them horizontally howver the smaller boxes are at the bottom. How can i fix it?
Here is the code i'm using for the boxes:
.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 200px;
}
vertical-align has to be used for inline and inline-boxe content, defaut vertical-align value is baseline.:
.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align:top;
width: 200px;
}
Can you not just put
position:relative;
top:0px;
Related
How to set fit-content for width in right side. I used fit-content value for width and every things Okay in left side, but in right side content put in center of page. I use this CSS for make dynamic width by content:
.chat li.right .chat-body {
margin-right: 60px;
border: 1px solid $c-grey;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
margin-left: 20%;
max-width: 80%;
width: fit-content;
}
It's my chat example:
CodePen Example
Replace with my give code.
.chat li.left .chat-body {
margin-left: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-right: 20%; */
max-width: 80%;
width: fit-content;
float: left;
}
.chat li.right .chat-body {
margin-right: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-left: 20%; */
max-width: 80%;
width: fit-content;
float: right;
}
and:
.chat li small.pull-left {
padding-left: 60px;
padding-top: 5px;
clear:both;
}
.chat li small.pull-right {
padding-right: 60px;
padding-top: 5px;
clear:both;
}
Working Demo
I want to do items style like here
and I'm doing it with UL. Here is the code what I have http://jsfiddle.net/WVLR9/1/
ul.gallery_items {
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li {
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-left: 19px;
}
ul.gallery_items li:first-child {
margin-top: 25px;
margin-left: 0px;
}
but I have no idea why the 4th item have bigger margin-left option... it should be in the same place like 1st item but in the second line. Can anyone help me?
http://jsfiddle.net/WVLR9/2/
You put margin-left: 19px on the li's rather than margin-right.
Margin left was causing the 4th row to be a certain margin away from the left border
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px;
}
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
You are explicitly giving the first item a different left margin:
ul.gallery_items li:first-child{
margin-left: 0px;
}
ul.gallery_items li{
margin-left: 19px;
}
4th item has the same margin as other items, you just removed margin from the first item:
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
and it looks like something is wrong with 4th element;
You could use margin-right instead of margin-left
You could wrap each row with additional <div class="row">
You could remove margin-left: 0 form the first element, and give margin-left: -19px to the parent element
how about this :)
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px; /* maybe you will need to adjust your margin on the ul element. */
}
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 10px;}
this should do it.
You've applied a
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
thats why first item didnt have left margin
I am having an issue with a shadow displaying incorrectly in CSS. It is set to drop on on the bottom and to the right of the box but for whatever reason it is being cut off and I can't work out why.
JS Fiddle
http://jsfiddle.net/jyb5V/
#content {
padding: 0 270px 0 0;
margin-bottom: 50px;
height: 800px;
background-image: url("images/mainbg.jpg");
border:1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
box-shadow: 4px 4px 2px #000000;
}
Website
http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Thanks
Remove overflow: hidden;
#container {
width: 100%;
float: left;
overflow: hidden; // remove this line
}
Demo
What i have made so far is here http://jsfiddle.net/cmRHp/1/
<div class="tv">13.3"</div>
and i want to make exactly like this
Those aren't actual rounded borders, so you probably have to use 2 elements.
.tv {
position: relative;
width: 200px;
height: 150px;
margin: 50px auto 0;
background: black;
color: white;
font: bold 300%/3.6 sans-serif;
text-align: center;
border-bottom-right-radius: 15px 70px;
border-top-right-radius: 15px 70px;
border-top-left-radius: 15px 70px;
border-bottom-left-radius: 15px 70px;
}
.tv-inner {
background: black;
height: 180px;
margin: 0 15px;
position: relative;
top: -15px;
border-bottom-right-radius: 70px 15px;
border-top-right-radius: 70px 15px;
border-top-left-radius: 70px 15px;
border-bottom-left-radius: 70px 15px;
}
<div class="tv">
<div class="tv-inner">13.3"</div>
</div>
http://jsfiddle.net/cmRHp/6/
See this pic:
http://twitpic.com/5k3uph
The CSS I use is:
#content_filter_items {
display: none;
background-color: #ccc;
padding: 3px;
margin-bottom: 5px;
clear: both; }
#content_filter_items .filter_item {
display: inline-block;
background-color: white;
width: 200px;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 100px; }
Why is it that I have the extra space on top of the 2nd column?
Thanks
Eric
Where you have display: inline-block, you also need to set vertical-align: top.
See the "baseline" section here for an explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/