For some reason, it seems like there is extra padding on the bottom of my div that holds an image inside it.
Here is the JSFiddle: http://jsfiddle.net/KSs7V/
Any idea on how that got there/how to fix it?
CSS:
.artist-box {
width: 100%;
text-align: center;
position: relative;
display: inline-block;
}
.artist-pic {
height: 245px;
margin: 0;
/*box-shadow: 0 0 10px black;*/
}
#artist-wrap {
max-width: 1800px;
margin-top: 5px;
}
.indArtistBox {
display: inline-block;
margin-right: 10px;
position: relative;
border: 1px solid #000;
}
Just add vertical-align:top or display:block to your image rules:
.artist-pic {
height: 245px;
margin: 0;
vertical-align:top;
/*box-shadow: 0 0 10px black;*/
}
jsFiddle example
An alternate option is to add font-size:0 on the image container div:
.indArtistBox {
display: inline-block;
margin-right: 10px;
position: relative;
border: 1px solid #000;
font-size:0;
}
jsFiddle example
The gap is due to the space reserved for descender elements (e.g. 'j', 'g', 'y') as images are inline elements.
Related
I have an absolute positioned div inside an overflow: auto, as here:
There 5 row divs with position relative, and I have a .grayBlock inside the row 2 div.
As you can see, the gray block is cut off due to the overflow: auto.
I want it to escape the container. What can I do?
You can construct an additional canvasInfo__block around the current one. It should be a little bit wider as the internal block (in my example, canvasInfo__block2).
The overflow: auto will surely cut, you can't do anything with it, but it won't be very bad because it is enough wide, to contain the internal canvasInfo__block2 and also the gray block overflowing from it.
canvasInfo__block2 needs an overflow: visible, while the external canvasInfo__block can get its overflow: auto.
The result:
HTML:
.canvasInfo
.canvasInfo__title
h3 Title
.hr
.canvasInfo__block
.canvasInfo__block2
.canvasInfo__slider sliderBar
.canvasInfo__activity Motion activity
.row
.circle
span line1
.row
.circle
span line2
.grayBlock hi2
.row
.circle
span line3
.row
.circle
span line4
.row
.circle
span line5
CSS:
.canvasInfo {
margin: 0 auto;
width: 500px;
}
.hr {
margin: 10px 0;
border-bottom: 1px solid red;
}
.canvasInfo__block {
position: relative;
overflow: auto;
width: 400px;
height: 120px;
border: 2px solid red;
}
.canvasInfo__block2 {
position: relative;
overflow: visible;
height: 300px;
width: 300px;
margin-left: auto;
margin-right: auto;
border: 2px solid blue;
}
.grayBlock {
width: 50px;
height: 50px;
background-color: gray;
position: absolute;
top: 0px;
left: -20px;
z-index: -1;
}
.row {
border: 1px solid gray;
position: relative;
}
.circle
{
position: relative;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 60px;
box-shadow: 0px 0px 2px #000;
span {
margin-left: 20px;
}
}
Why is the floated image being moved next to a paragraph inside of a div move outside of that div when I float other div elements?
For example, I have a div class with a paragraph in it and that when I float the image inside of that class it wraps around it the way I want?
.container {
margin:0px auto;
width: 1400px;
background-image: url(back.png);
padding-top:10px;
height: 2000px;
}
.main {
background-color: #f7f4f4;
margin-right: 600px;
box-shadow: 10px 10px 10px #705656;
border-radius: 10px;
border: 2px solid red;}
.green {
border: 2px solid blue;
width: 400px;
margin-right: 40px;
background-color: #8bed8f;
float: right;}
.aside {
background-color: #f47575;
width: 400px;
margin-right: 40px;
border-radius: 4px;
float: right;
clear: right;}
.trac input[type=button] {
background-color: #9b878b;
font: weight: bold;
font-size:15px;
color: white;
border-radius: 6px;
border: none;
padding: 20px 10px;
margin-left: 300px;
margin-top: 5px;}
.tmac {
float: left; }
If I understanded your problem (the question you asked is a bit messy), you have to consider that floating HTML elements wraps to the closest position relative container.
If you want to stick a float to a specific container, you just have to add to the CSS class of that container the rule position: relative
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I'm having issues getting my content box to extend to encompass everything within it. shouldnt max-height:100% do this?
http://codepen.io/anon/pen/xujAC
There's the codepen of my code. The red and blue background are for visual reference only.
Shouldnt the blue background (.container) only extend 20px below the blocks?
Pretty new at this and learning as I go. I'm probably missing something easy.
Thanks a lot.
You have the height of your .container set to 100%. In this sample, it will be as tall as its containing element. Because its top is set to 80px and its height is that of its parent, it will extend below the bottom by ~ 80px.
Other things that throw this off are:
floated elements are outside the regular flow which means the containing element can't calculate the height of its children. In this case, I think the simplest fix would be to use position: inline-block; for the children.
The child elements banner and container are absolutely positioned. This also take them outside the flow of the document. In this example, I believe you can get the results you are looking for using relative positioning.
Margins are also throwing off the layout. Here you can using padding in #content to achieve better results.
Demo fiddle
Updated CSS:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background-color: #dcdcdc;
position: relative;
}
#content {
position:relative;
margin: 0 auto;
width: 960px;
min-height: 500px;
max-height: 100%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 2px 2px #111;
background-color: red;
padding: 20px;
padding-top: 0;
}
#banner {
width: 900px;
position: relative;
margin: 0 auto;
padding: 0;
text-align: center;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
top: 15px;
left: 30px;
height: 100px;
box-shadow: 0 2px 0 #ddd;
}
#banner h2 {
color: #555;
text-shadow: 0 -1px 0 #000;
}
.container {
margin: 0 auto;
padding: 0;
position: relative;
background-color: blue;
}
.blocks {
display: inline-block;
width: 250px;
height: 150px;
background-color: #666;
margin: 25px;
margin-top: 30px;
}
I've recreated my issues with this jsfiddle
My date div on the right get moved down if the window becomes too small when re-sized (thinking mobile device view)
Is it possible to re-size the text area and keep the date div at the top when re-sized?
I've included two screen showing the issue when re-sized.
Screen 1
Screen 2 (re-sized)
My current css looks like this:
div.thumbnail_image {
float: left;
height: 64px;
position: relative;
width: 64px;
}
.widget-content {
padding: 12px 15px;
border-bottom: 1px solid #cdcdcd;
}
.msg-list {
border-top: 1px solid #DDDDDD;
padding: 10px 12px;
}
.msg-list span {
display:block;
}
.msg-list .msg-date {
display: block;
border: solid 1px #00ff00;
color: #BBBBBB;
float: right;
margin: 0 0 0 0;
text-align: center;
width: 50px;
}
.msg-list .msg-date .msg-month {
display: block;
font-size: 19px;
font-weight: bold;
margin-bottom: -4px;
}
.msg-summary {
border: solid 1px #ff0000;
display: block;
float: left;
max-width: 70%;
}
One way to achieve that is to remove the float: left from .msg-summary and give it a margin to the right to reserve the space for the date-div, see http://jsfiddle.net/ZybhC/2/
You can achieve such a design by ordering your elements like this:
image
date
text
All you need then is float the image div left, float the date div right, apply margin to the text div equal to the other divs width:
.middle {
float:none;
margin:0 64px;
}
.date {
float:right;
}
.msg {
width:50%;
min-width:200px;
}
Demo: http://jsbin.com/ofevot/1/edit