Given a block element and a float that sits to the right of it, how can I ensure the block element doesn't overlap the float when space is constrained? Here's an example (jsfiddle):
HTML:
<body>
<div class='goodContainer'>
<div class='floater'>Image Placeholder</div>
<p class='header'>Header is here</p>
</div>
<br/>
<div class='badContainer'>
<div class='floater'>Image Here</div>
<p class='header'>Header is here</p>
</div>
</body>
CSS:
.goodContainer {
width: 400px;
border: 1px solid green;
}
.badContainer {
width: 300px;
border: 1px solid red;
}
.header {
border: 1px solid black;
max-width: 70%;
}
.floater {
float: right;
width: 100px;
height: 100px;
border: 1px solid blue;
}
In the first box (green border) there's enough space to allow the header and image to coexist peacefully. In the second (red box) space starts to get constrained and they begin to overlap. Is there any way I can make the header resize dynamically in this case as to not overlap the image? I'm open to changing whatever is needed to make it work while keeping the general appearance (specifically that it preserves the proper width of the header when available).
Perhaps this one:
.header {
display: block;
margin: 5px 0px;
border: 1px solid black;
margin-right: 100px;
max-width: 250px;
}
http://jsfiddle.net/5bpgrcq9/6/
Related
why the border of the span is next to top? if I delete the display of span, it works.
thank you.
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
display: inline-block;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
As other explained in the comments, the issue is that you have a fixed height of 20px and you set a line-height that get inherited from the parent to 80px so the line-box height is bigger thus you are having an overflow.
If you change the line-height of the inner span it will get fixed:
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
line-height: initial;
display: inline-block;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
Now why the border is positionned on the top?
It's because the default alignment is baseline and to define the baseline we consider the text.
Aligns the baseline of the element with the baseline of its parentref
If you change the vertical-align to be bottom, for example, you will see that the border will be on the bottom.
Aligns the bottom of the element and its descendants with the bottom
of the entire line.ref
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
If you add overflow:auto will clearly understand the overflow issue and you will also change the baseline of the element to make it the bottom border:
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
display: inline-block;
overflow:auto;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
If you remove the fixed height you will also notice that the height of the element will get defined by the line-height (the height of the line-box) and will logically be 80px:
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
display: inline-block;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
I'd like to create an outer DIV, which contains several inner DIVs. At the moment, this works perfect.
But I have some troubles with the margin of the outer div. If the outer DIV has a fixed height (f.ex. height: 100px;), there will be a margin at the bottom. But if I set the height to auto (it should have only the height of all inner DIVs), the margin-bottom disappears.
Example:
Here, the margin-bottom applies normaly. The height of the outer-box is set to a fixed height:
https://jsfiddle.net/v81mehc5/3/
But changing the height of the outer DIV from a fixed height (75px) to auto, the margin-bottom of 40px disappears.
https://jsfiddle.net/v81mehc5/2/
What's missing in the second case? What's wrong overthere?
HTML
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
CSS
.outer-box
{
width: 200px;
height: 75px; /*if height: auto > no margin-bottom will be applied*/
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
Thank you very much for your help.
Nothing is missing but you are using floating elements inside the outer div. So height:auto means height:0 in you case so you are only seeing the margin-bottom (that you thought it's the height).
In order to fix this you need to add overflow:hidden to outer div.
.outer-box
{
width: 200px;
height: auto;
overflow:auto;
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
More questions related to the same issue for more details :
Why does overflow hidden stop floating elements escaping their container?
CSS overflow:hidden with floats
Floating elements collapse their container. You'll see that if you apply a border to it:
<div style="border: 1px solid #666; margin-bottom: 40px;">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
You can use a clearing technique to get around this as a possible solution that works in IE8 and up:
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div style="border: 1px solid #666; margin-bottom: 40px;" class="clearfix">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
I am trying to implement a double border as shown below with CSS - ideally without using extra elements.
My initial thought would be to apply the first border to the container element, and the second to the title element below.
.box {
border-top: 1px solid black;
}
h2 {
float: left;
border-top: 2px solid red;
margin-top: 0;
padding-top: 10px;
padding-right: 5px;
}
<div class="box">
<h2>Title</h2>
<p>Some text here</p>
</div>
The main issue here is that the requirement may be that the width of the small border is indepedent of the width of the text. Also we may run into problems with line-height / vertical text alignment.
Are there are other viable solutions to this problem?
I hope the below CSS code will help you.
.box{
border-top: 2px solid gray;
}
h2{
width: 200px;
height: 300px;
border-top: 2px solid red;
position: absolute;
top: -12px;
}
http://s4.postimg.org/mbrpxn2d9/Untitled.png
Edit: Not a duplicate. The other question doesn't contain information about divs being automatically adjusted to the words on the inside.
I have 4 divs. I have 3 divs inside another div, and I'm trying to float one to the left, one to the center, and one to the right. I'm also trying to make the width and height of the divs on the inside to be automatically adjusted to the width and height of the words on the inside of the divs. I also want the divs on the inside to stack up on top of each other, instead of being on the same line. So far, I got the left div to float to the left, and the right div to float to the right, but I just cannot get the middle div to be centered, nor get it to adjust to the width and height of the word inside of it. Please take a look at my code:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
float: left;
}
#innerMiddle {
border: 1px solid red;
margin: auto;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>
Depending on the output of the image, I think flexbox solution would be a good way to go.
Let the container have a flexible layout with column wrapping.
Align each item based on position in the container i.e. flex-start, center and flex-end
#outer {
display: flex;
display: -ms-flex;
flex-flow: column wrap; /* Wrap the items column wise */
justify-content: flex-start; /* Items to start from the top of the container */
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
align-self: flex-start; /* Equivalent to float: left of your code */
border: 1px solid red;
}
#innerMiddle {
align-self: center; /* Equivalent to margin: auto */
border: 1px solid red;
}
#innerRight {
align-self: flex-end; /* Equivalent to float: right */
border: 1px solid red;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>
If changing your HTML just a bit is an option, you can add span elements in your divs which will give you want, and it will work in all browsers:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
text-align:left;
}
#innerMiddle {
text-align:center;
}
#innerRight {
text-align:right;
}
div > div > span {
border: 1px solid red;
}
<div id='outer'>
<div id='innerLeft'><span>Left</span></div>
<div id='innerMiddle'><span>Middle</span></div>
<div id='innerRight'><span>Right</span></div>
</div>
This is what you mean?? I had Edited
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
/* width: 30%; */
float: left;
}
#innerMiddle {
border: 1px solid red;
float: left;
margin: 0 5px;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>LeftLeftLeftLeft</div> <br>
<div id='innerMiddle'>MiddleMiddleMiddleMiddle</div> <br>
<div id='innerRight'>RightRightRightRight</div>
</div>
write your html tags like this hope it help!
<div id='outer'>
<div id='innerRight'>Right</div>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'></div>
</div>
I have this set of divs in may page and I can not get the whole lot to re-size on browser window re size, I have tried to use some Jquery coding found on this site but it seems that the Divs are only resizing on width rather than on both w & H.
My image for divs is on this link:
www.beemagic.co.uk/mydiv.html
Not really sure what your after, from the looks of it you want the whole site to be able to be resized?
I come up with this very basic JSFiddle that shows that it can be done if that's really how you want it.
HTML:
<div class="wrap">
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="slider"></div>
</div>
</div>
CSS:
.wrap {
height: 1000px;
width: 100%;
border: green 2px solid;
}
.header {
height: 19%;
width: 99.6%;
border: blue 2px solid;
margin: 5px;
}
.content {
height: 79%;
width: 99.6%;
border: red 2px solid;
margin: 5px;
}
.side {
height: 85%;
width: 20%;
border: purple 2px solid;
margin: 5px;
}
.slider {
height: 10%;
width: 99%;
border: gold 2px solid;
margin: 5px;
}
DEMO HERE