I know this html is sloppy, with some extra divs that are unnecessary, but regardless, I can't understand why the div with ID "info_box_right" is aligning to the bottom of the parent div (you can see the "text" aligned to the bottom at the below jsfiddle example).
Any ideas how I can get it to align to the top of its parent?
http://jsfiddle.net/taddme0y/1/
HTML:
<div id="info_container" >
<div id="info_box">
<hr class="info_box_hr" noshade>
<a id="info_box_title"></a>
<hr class="info_box_hr" noshade>
<div id="info_box_wrapper">
<div id="info_box_left">
<div class="info_box_sub_wrapper">
<a id="info_box_logo">
<img class="info_img" id="info_img_logo" alt="logo">
</a>
<a id="info_box_screenshot">
<img class="info_img" id="info_img_screenshot" alt="screenshot">
</a>
</div>
</div>
<div id="info_box_right">
<div class="info_box_sub_wrapper">
<a id="info_box_right_text">
Text
</a>
</div>
</div>
</div>
</div>
</div>
CSS:
#info_container {
z-index: 500;
position: relative;
top: 0;
left: 0;
width: 80%;
height: 0;
margin: 0 auto;
background-color: #000000;
}
#info_box {
z-index: 500;
position: relative;
top: 50px;
width: 100%;
background-color: #FFFFFF;
text-align: center;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
#info_box_wrapper {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_left {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
}
#info_box_right {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
/* margin-bottom: 20px; */
}
.info_box_sub_wrapper {
position: relative;
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_right_text {
position: relative;
color: #4D4D4D;
}
#info_box_logo, #info_box_screenshot {
position: relative;
width: 100%;
margin: 0 auto;
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
border-style: transparent;
border-color: #4D4D4D;
border-width: 2px;
cursor: pointer;
}
.info_img {
width: 100px;
margin: 20px;
background-color: #000;
}
You can specify how you want an element to vertically align using the vertical-align CSS property.
#info_box_right {
vertical-align: top;
}
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Related
I've got a basic html that contain such lines
<div id="circle">
<div id="slider"></div>
</div>
<div id="audio-player-core" class="controls">
<img src="" alt="nothing" width="65px" height="65px">
</div>
And css
#circle {
width: 100px;
height: 100px;
border: 2px solid rgba(0,0,0,0.5);
border-radius: 100%;
float: left;
margin-left: 10px;
}
#slider {
position: relative;
height: 30px;
width: 30px;
background: rgba(0,0,0,0.5);
border-radius: 100%;
cursor: pointer;
}
.controls {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 99;
background-color: transparent;
width: 500px;
margin-left: 20px;
}
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
}
But I cannot make them overlap each other (specifically I want for rectangle to start at the center of the circle while hiding part of circle inside). When I try to move one via margin - another moves and so on.
jsfiddle
How to overlap them?
Use positioning. For example,
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
position: absolute;
left: 50px;
top: 60px;
}
#circle {
width: 100px;
height: 100px;
border: 2px solid rgba(0,0,0,0.5);
border-radius: 100%;
float: left;
margin-left: 10px;
}
#slider {
position: relative;
height: 30px;
width: 30px;
background: rgba(0,0,0,0.5);
border-radius: 100%;
cursor: pointer;
}
.controls {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 99;
background-color: transparent;
width: 500px;
margin-left: 20px;
}
#audio-player-core {
border: 1px solid;
border-radius:0 10px 10px 0;
border-color: rgba(0,0,0,0.5);
position: absolute;
left: 50px;
top: 60px;
}
<div id="circle">
<div id="slider"></div>
</div>
<div id="audio-player-core" class="controls">
<img src="" alt="nothing" width="65px" height="65px">
</div>
I have an item has position: absolute in a container. I centered it by left: 50% and transform: translateX(-50%);. This item just contain text and i want it cover it's content and the text will nowrap as much as possible.
As we can see in the snipet below, the item have enough space but it did not increase width. It broke line. I know i can add white-space: nowrap to stop it breaking line but if the text is longer, one line can not wrap all text.
Adding width: 100% to item can not help because I want the width of item is dynamic base on it's content.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you?</span>
</div>
</div>
It this what you want? Use left: 0, right: 0 instead to center it then move your other styles in span.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 0;
right: 0;
text-align: center;
}
.item .content {
display: inline-block;
width: auto;
height: auto;
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<div class="content">
<span>Hello. Its me. How are you?</span>
</div>
</div>
</div>
Would flexbox work for you?
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
display: flex;
justify-content: center;
align-items: center;
}
.item {
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you? Hello. Its me. How are you? Hello. Its me. How are you? </span>
</div>
</div>
Please try this.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: relative;
}
.item {
margin-top: 20px;
display: flex;
justify-content: center;
}
.item span{
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you?</span>
</div>
</div>
Try adding center align for span tag
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
.item .itemInner {
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
text-align: left;
margin: 0 auto;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="item">
<span class="itemInner">Hello. Its me.</span>
</div>
</div>
</body>
</html>
I am trying to set three divs side by side with each equal width and height.
I am unable to remove that extra space at right at right most div. If I set its margin-right to 0 the rightmost div becomes bigger than other two.
Here is the fiddle.
Css:
.recordpopup {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, .8);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.recordpopup .retry {
background-color: black;
border: 1px solid white;
xborder-radius: 8px;
box-sizing: border-box;
color: white;
font-family: ProximaNova-Regular;
font-size: 16px;
font-weight: bold;
xheight: 50px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
position: relative;
text-align: center;
top: 30%;
width: 40%;
z-index: 15000;
border-radius: 8px;
padding: 20px 10px;
background-image: url('images/gray_bar.png');
background-repeat: repeat-x;
background-color: white;
}
#product-wrapper {
overflow: hidden;
margin-top: 25px;
}
.product {
float: left;
width: 33%;
display: table-cell;
width: 33.33333333%;
}
.product .container {
margin-right: 10px;
padding: 10px;
background-color: #000;
}
.product .container img {
display: block;
margin: 0 auto;
width: 100%;
}
#closeRecord {
background: black none repeat scroll 0 0;
border: 2px solid white;
border-radius: 50%;
color: white;
cursor: pointer;
height: 25px;
right: -15px;
left: right;
position: absolute;
top: -10px;
width: 25px;
}
Html:
<div class="recordpopup">
<div class="retry">
<div id="closeRecord">x</div>
<div style="width: 100%;text-align: left;margin: 5px 0;font-size: 12px;color:#333;"><span class="TitleText">Lorem Ipsum Lorem Ipsum</span> </div>
<div id="product-wrapper">
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
</div>
</div>
</div>
Here is my solution.
The key is removing the margin-right: 10px and adding
.product:nth-child(1) .container{
margin-right:5px;
}
.product:nth-child(2) .container{
margin: 0 5px 0 5px;
}
.product:nth-child(3) .container{
margin-left: 5px;
}
JSFiddle ===> https://jsfiddle.net/kjkk3f9d/1/
The margin-right: 10px was pushing out your divs, replace it with margin: 0 5px to give a uniform look
.product .container {
margin: 0px 5px;
padding: 10px;
background-color: #000;
}
https://jsfiddle.net/kjkk3f9d/3/
check out my fiddle:
https://jsfiddle.net/kjkk3f9d/2/
the important styles are
#product-wrapper {
overflow: hidden;
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.product {
flex-basis:0;
flex: 1 1 auto;
margin: 5px;
}
I read this post but still ain't able to center the inner <div> :
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
It must be related to the position: absolute; property but it is required in order to insert absolute-position <img> elements in the inner <div>.
Simple, add this:
.game {
right: 0;
left: 0;
margin: 0 auto;
}
Since the width is given left and right will not affect your elements width. margin: 0 auto; will do the positioning
Example:
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right:0;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
Just add
left: 0;
right:0;
To the game class, and it will be horziontally centered. The trick here is to set the position to left 50%, and margin left to minus 1 half of the container width. Let me know if this solves it for you.
EDIT: helpful comments have shown me that we do not need the margin left negative, we can just set the left and right attribute for horizontal alignment. This is better because it will work regardless of the width of the element
Here's another approach..
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
http://www.codeply.com/go/E0xL0KyOkU
you can use the image as the background of the class game
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
height:300px;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position:relative;
left: 0;
top:28%;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
try this
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
}
.game {
border: 5px solid black;
width:30%; margin:0 auto;
position: absolute;
left: 0;
right: 0;
padding: 0 20px;
}
<div>
<div class="game">
test
</div>
</div>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}