I have two div elements. Second is inside in first element.
In second I display some text. For second div I set height to auto and when I put more text in div height is greater. Also I set height for first div to auto, but first div has always same height.
How I can set height of DIV to be dependable of number of text rows?
<div class="first-div">
<div class="second-div">
</div>
</div>
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: auto;
min-height: 75px;
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Add overflow:hidden to .first-div.
You may want to check out this question: How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?
Demo 1
add overflow: auto to outer div (.first-div)
css
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: 100%;
min-height: 75px;
overflow:auto; /* added */
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Demo 2
or you can add div to the html and set its style as clear: both
css
.clear {
clear: both;
}
html
<div class="first-div">
<div class="second-div"></div>
<div class="clear"></div>
</div>
You can remove the min-height from your .first-div and apply overflow: hidden check out the fiddle, I think this is what you want.
In the .second-div you can change the height with min-height. In the fiddle I have it at 300px.
http://jsfiddle.net/wcnbq9xc/
Related
my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing
here is css:
.card_main {
border: 1px solid black;
margin-top: 30px;
border-radius: 5px;
height: 900px;
background: #ffffff;
width: 100%;
}
.blog_content__text {
width: 95%;
height: 320px;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
.blog_heading {
font-size: 24px;
color: black;
}
.blog_details {
font-size: 16px;
color: black;
opacity: 0.7;
margin-top: 20px;
}
my html
<div className="card_main">
<div className="blog_content__text">
<h1 className="blog_heading">{data.blog_title}</h1>
<p className="blog_details">{data.blog_body}</p>
</div>
<div/>
how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css
When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;
If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.
.blog_content__text {
width: 95%;
height: 320px;
overflow-y:auto;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
remove the height: 320px;
if you must, use it as min-height: 320px;
try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.
You can also make use of the following property if you really want to set the height:
height: min-content;
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
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I am practicing on web design and I noticed that the height of the parent div is somehow smaller than the child div.
here is my css code:
html,body{
background-color: #ecf0f1 ;
height: 100%;
padding:0px;
margin:0px;
}
#homeDisplay{
width: 850px;
height: auto;
border: 2px solid #7f8c8d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left:auto;
margin-right:auto;
padding:8px;
}
#signupForm{
text-align: right;
float:right;
width: auto;
height: auto;
border: 2px solid #7f8c8d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 8px;
}
It's because of the float: right in your #signupForm. This causes the div to be taken out of the floating of the document.
Put a
<div class="clear"></div>
with
.clear {
clear: both;
}
after the signup form.
You are using float:right for the inner content, so it is removed from the normal flow of the document and parent can't adjust it's size according to the content's size. Fix : set overflow:auto CSS property to the container.
I do not understand why in this simple code my .slot or .card classes seems to have a bigger margin/distance to their border at the bottom than at the top.
Thanks in advance,
JsFiddle: http://jsfiddle.net/Tighttempo/LgeAf/
<div id="hand">
<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
<div class="card" id="card3"></div>
<div class="card" id="card4"></div>
</div>
<div id="playfield">
<div class="slot" id="slot1"></div>
<div class="slot" id="slot2"></div>
<div class="slot" id="slot3"></div>
<div class="slot" id="slot4"></div>
</div>
The CSS:
#hand{
text-align: center;
width: 320px;
border: solid black 3px;
padding: 5px;
}
.card{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 5px 0px 5px;
}
#playfield{
width: 320px;
text-align: center;
border: solid black 3px;
padding: 5px;
}
.slot{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 5px 0px 5px;
}
Thanks in advance!
If you are not comfortable with making the font-size:0 then here is a solution that i personally prefer.
Display:inline-block is tricky and has strange issues with margins. What i personally do is, i use float instead of inline-block. See this :
.card{
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 10px;
float:left;
}
.slot{
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 8px;
float:left;
}
What i did is, i added float:left to your .slot and .card and then created a new class .cls(clear:both) and applied that in the div structure. See if this helps.
http://jsfiddle.net/LgeAf/3/
Inline-block elements are tricky - because they are not treated as block elements when it comes to positioning them in the document flow. Their positions and spacings are influenced by CSS properties that control text, like line-height, word-spacing, letter-spacing and font-sizes.
If you set font-size in the parent containers, #card and #playfield, to 0, you will remove the extra bottom margin. See fiddle - http://jsfiddle.net/teddyrised/GwqcV/
#hand, #playfield {
font-size: 0;
}
The drawback of this method is that you will have to redeclare the font-size in the child elements if you are using relative font sizes, like ems.