I have centered 3 divs beside each other in the center, however the one on the right seems to be vertically higher than the other 2 divs. Check it out
.x-gallery-center {
width: 100%;
text-align: center;
}
.x-gallery-container {
display: inline-block;
margin: 10px;
width: 250px;
height: 370px;
position: relative;
}
What's the culprit?
Thanks!
If you make the text in the link in the center shorter it seems to fix the problem, make "Konferencia Rozvoj ľudských zdrojov" -> "Konferencia" and the div's will all appear side-by-side.
inline-block default alignment is baseline. Add vertical-align:top to your x-gallery-container class.
.x-gallery-container {
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.1);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.1);
box-shadow: 0 3px 5px rgba(0,0,0,.1);
background-color: #FFFFFF;
display: inline-block;
margin: 10px;
width: 250px;
height: 370px;
position: relative;
vertical-align:top;
}
DEMO
Related
Trying to simulate a top border that doesn't start at the left edge of the element.
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px -1px 0 0 black;
}
The above css is close, but produces a black 15px wide shadow to the right of the div. How do I contain that?
http://jsfiddle.net/3sjngyk1/
Top border with just a box shadow?
.border-top {
height: 50px;
width: 100px;
box-shadow: 0px -10px 0px 0px red;
margin-top: 25px;
background: lightblue;
}
<div class="border-top"></div>
Alternatively, you can use a pseudo-element and calc (if the border isn't going to be full width - it's not clear from your question).
.border-top {
height: 50px;
width: 100px;
background: lightblue;
position: relative;
margin-top: 25px;
}
.border-top::after {
content: '';
position: absolute;
height: 5px;
bottom: 100%;
left: 15px;
width: calc(100% - 15px);
background: red;
}
<div class="border-top"></div>
How about this?
http://jsfiddle.net/vleong2332/3sjngyk1/2/
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px 0px 0 0 white, 15px -1px 0 0 black;
}
Put another shadow with the same color as the background on top of the black one.
I'm having difficulty getting a div containing text to reduce it's width in order to wrap nicely next to an image that's floated right. The text inside the div is behaving as I would like it to but the grey div is stretching behind the image.
The div/box is part of a wordpress shortcode plugin. I don't know whether that is complicating matters
Here is the css for the elements in question
Image:
.circular-image-right img {
border-radius: 50%;
clear: both;
display: inline;
float: right;
height: 300px;
margin: 0 30px 60px;
width: 300px;
}
Div:
element.style {
text-align: left;
width: 100%;
}
.symple-box.gray {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
.symple-box {
-moz-box-sizing: border-box;
border-radius: 2px;
display: block;
font-size: 1em;
margin: 10px 0;
padding: 30px 15px 5px;
}
The page in question can be seen here:
http://c3927181.myzen.co.uk/
http://jsbin.com/iLAMuXoc/5/edit?css,output
.symple-box.gray {
padding: 16px 30px;
margin: 0 360px 0 0;
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
I have a fiddle here:
http://jsfiddle.net/45jQm/6/
How do I get the logo portion to be curved also without specifying? Seems this should be possible. Here is the code...
#wrapper {
position: relative;
background-color:rgba(255,255,255,0.5);
width:200px;
min-height: 985px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 10px 0px 10px -7px #333, -10px 0px 10px -7px #333;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.logo {
position: static;
background-color:rgba(0,0,102,0.7);
padding-top: 10px;
}
.logo {
....
border-radius: inherit;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
http://jsfiddle.net/45jQm/11/
Adding the overflow:hidden to the parent div should hide the corners from any child div. No need to add any css to the child div (like the logo in your example).
.parent {
…
border-radius: 5px %* or whatever you choose *%
overflow: hidden;
}
an example: https://jsfiddle.net/uxrzgojh/
This answer is for the future explorers!
On my site I am working on a new page. When I view it it on a bigger screen the box is to the left. I am trying to make it left to align with everything.
CSS:
.contactbox {
width: 200px;
height: auto;
margin-left: 400px;
left: 400px;
padding: 12px
background-color:#F5F5F5;
border: 1px solid #9C9C9C;
text-align: left;
box-shadow: 2px 2px 7px 2px #DBDBDB;
-moz-box-shadow:2px 2px 7px 2px #DBDBDB;
-webkit-box-shadow:2px 2px 7px 2px #DBDBDB;
}
Instead of using margin-left: 400px; use margin: 0 auto;. This will automatically make the left and right margins equal, centering the div.
EDIT:
Move it 400px left like so:
.contactbox {
margin: 0 auto;
// Allow it to be moved relative to its original (centered) position
position: relative;
// Move to the left (left means the left edge not the direction of movement)
left: -400px;
}
Content get overflowed hidden when navigating to previous comments, please see the links.
Example:
http://justfortest.cba.pl/misc/index.html (full content displayed)
http://justfortest.cba.pl/misc/index.html#comment-3 (content is cut to anchor link)
I discovered that when I remove overflow: hidden; from .content>div then content is not overflowed, but then the design is destroyed: problem with background and too long div.
after removing overflow: hidden; (problem with div length and background).
justfortest.cba.pl/misc/index2.html#comment-3
Updated:
Here is the code for content part:
.content {padding: 40px 0; border-top: 5px solid #e3e4e6; border-bottom: 1px solid #d8d8d8; background: url("images/bg.png");}
.content>div { width: 980px; margin: 0 auto; border: 1px solid #d8d8d8; background: #fff;}
.main {float: left; overflow: hidden; width: 610px; margin-bottom: -5000px; padding: 15px 35px 5030px;}
.sidebar {float: right; width: 260px; margin-bottom: -5000px; padding: 15px 19px 5030px; border-left: 1px solid #e8e8e8; background: #fafbfc;}
Could you please help with that problem?
Any help will be appreciated.
Kind regards
try this
.main {
float: left;
margin-bottom: 0; /* from -5000px */
overflow: hidden;
padding: 15px 35px 30px; /* from 15px 35px 5030px */
width: 610px;
}