Why is it that my border does not go around my inner divs, and my inner div borders do not go to the bottom of the outer div, ( in FF but need this for all major browser).
Can someone please help
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
Alter #main to float: left; or overflow:hidden. I recommend the float
Set overflow: hidden; on #main.
Edit: demo
Floating elements takes them out of the normal flow of the document, meaning their container no longer understands where they end for lack of a more technical explanation. To solve the issue you need to clear the float after the last inner div by adding an element with clear:both applied. http://jsfiddle.net/calder12/BcqnE/
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div><div class="clear"</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
.clear{clear:both;}
There is also the clearfix method which is similar to the above but the more standard approach these days. http://j.mp/bestclearfix
Related
I'm using bulma as a CSS framework, I have something that looks like the following:
<div class="columns is-gapless">
<div class="column is-four-fifths carte" id="column1">
<div class="viewer">
...
</div>
</div>
<div class="column is-flex is-fullheight" id="column2">
...
</div>
</div>
in my css I have:
div.viewer{
height: 100%;
width: 100%;
}
The issue I'm facing is that my class viewer is inherting the height of columns and not from his parent 'column1'. in the end My class viewer overlaps my second column ('column2') and it's not the expected behaviour. I want my element viewer to stay inside the column1 div.
Also same issue if I want to have the position of my viewer to be let's say 20px from the right border of my #column1 I did:
div.viewer{
...
position: absolute;
right: 20px;
}
However the viewer is 20px from the right border of my browser window and not my #column1
Not sure about Bulma but even with a barebones examples the viewer class will stay inside column1 no matter how big it is. (I added display: flex; just to align the columns horizontally and some borders for a visual)
.column-container {
display: flex;
padding: 5px;
border: 2px solid black;
}
#column1 {
border: 2px solid blue;
}
.viewer {
width: 100px;
height: 100px;
background-color: gray;
border: 2px solid red;
}
#column2 {
border: 2px solid green;
}
<div class="column-container">
<div id="column1">
<p>col 1</p>
<div class="viewer">
<p>viewer</p>
</div>
</div>
<div id="column2">
<p>col 2</p>
</div>
</div>
I finally solved this by setting the position of my #column1. My solution was:
div#column1{
position: relative;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
There is some space between #child divs. How can I make them stack perfectly without any gaps? There is no problem when I don't have the <img> in there. Also, there is a blue stripe under the image, which is part of the div, but I don't understand why it's showing.
I am not an expert on HTML or CSS. I am a beginner who is starting to pick it up for marketing reasons. Any help and/or advice is highly appreciated it!
#parent {
max-width: 850px;
margin: 0 auto;
border: 10px solid black;
}
#child {
background-color: blue;
text-align: center;
color: #eee;
font-size: 56px;
}
img {
width: 100%;
}
<div id="parent">
<div id="child">
<img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
</div>
<div id="child">
<p>Div 2</p>
</div>
<div id="child">
<p>Div 3</p>
</div>
<div id="child">
<p>Div 4</p>
</div>
</div>
Here is an image of my problem.
http://imgur.com/a/sqdpB
Paragraphs have a margin by default, so just remove that. And to get rid of the line below the image, add vertical-align:top to your img rules:
#parent {
max-width: 850px;
margin: 0 auto;
border: 10px solid black;
}
#child {
background-color: blue;
text-align: center;
color: #eee;
font-size: 56px;
}
img {
width: 100%;
vertical-align: top;
}
p {
margin: 0;
}
<div id="parent">
<div id="child">
<img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
</div>
<div id="child">
<p>Div 2</p>
</div>
<div id="child">
<p>Div 3</p>
</div>
<div id="child">
<p>Div 4</p>
</div>
</div>
try to set margin and padding to 0px in your paragraph
that should solve your problem
I want all three boxes to be at the same level, you'll see how box 2 is below box 1 and 2 because it has less content in it than the other boxes, but there has to be some style I am missing to be make each div display at the same level (visually speaking) regardless of the content in it.
http://jsfiddle.net/bkmorse/519xzvou/
css
.container {
width: 470px;
border:1px solid purple;
height: 210px;
}
.box {
width: 150px;
height: 200px;
border:1px solid red;
display:inline-block;
}
html
<div class="container">
<div class="box">
<h1>Box 1</h1>
<p>Content</p>
<p>Content</p>
</div>
<div class="box">
<h1>Box 2</h1>
</div>
<div class="box">
<h1>Box 3</h1>
<p>Content</p>
<p>Content</p>
</div>
</div>
apply the style vertical-align:top to .box in your stylesheet
Making them display like table-cell also fit their heights and placement automatically:
http://jsfiddle.net/519xzvou/2/
.box {
width: 150px;
height: 200px;
border:1px solid red;
display:table-cell;
}
You can Use CSS 3 property in parent class
display:-webkit-box;
-webkit-box-orient: horizontal;
[jsfiddle][1]
[1]: http://jsfiddle.net/519xzvou/4/
I have two divs inside a div. I want the second div to fill up to the bottom of the container. I tried various height: 100%;, height: inherit;, height: auto;, etc. and different values for display css property, but didn't succeed. Please help.
Html:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Fiddle
Note: The second div has some rows and then a footer. I want the rows to be hidden as per the height. But the footer of the second div should be visible.
Another note:
The container is re-sizable (using JQuery Re-size). Hence I do not want to set the height of the second div. That will make it static. I want the second div to have dynamic height. i.e. Expanding yo the bottom of the container, always.
Try This
**overflow:hidden;**
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;overflow:hidden;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Or Else you have to master div height auto and inner keep 100% some content inside.
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: 100%; background-color: green;'>
</div>
</div>
when you do height: inherit;, the target container acquires the height of parent, that's why, your inner green div is taking height:100px and hence it is overshooting.
You should NOT DO overflow:hidden, as it will eat up your lower content.
What you should do is to either give percentage height to both your containers like
<div id="parentDiv" style='height: 100px; width: 100px;
background-color: black; border: 3px solid black;'>
<div id="topDiv" style='background-color: red;height:30%'>
<label>Test</label>
</div>
<div id="lowerDiv" style='height: 70%; background-color: green;'>
</div>
</div>
or use javascript to set height of your containers, something like
$(window).resize(function(){
var _heightT= $('#parentDiv').height();
$('#topDiv').height(_height*0.3);
$('#lowerDiv').height(_height*0.7);
})
I would suggest to give your Parent container a fixed height(deduced according to the window size, through javascript/jQuery), so that it is consistent across all browsers, and your inner containers, a percentage height, or atleast your top container a fixed height, and lower container a min-height and overflow-y:auto
How about something like this:
HTML:
<div id="con">
<div id="top">
<label>Test</label>
</div>
<div id="bottom">sdsdfsdfsdfs sdfs dfsdf sdf sd ff</div>
</div>
CSS:
#con {
height: 200px;
width: 100px;
background-color: black;
border: 3px solid black;
position: relative;
}
#top {
background-color: red;
position: absolute;
width: 100%;
}
#bottom {
top: 0px;
left: 0px;
background-color: #F5F5F5;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: green;
}
Take a look and see what you think. (you will have to push down inside to put text etc using padding-top: 20px;
DEMO HERE
Very simple:
<div style='overflow:hidden;height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
You could use a percentage based height like you suggested, but the thing is when you set the bottom div to height:100%; that means 100% of the parent div's height which is 100px and it'll go outside the box, instead you could give the top div a 25% height and the bottom div 75% height, like this:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='height:25%; background-color: red;'>
<label>Test</label>
</div>
<div style='height: 75%; background-color: green;'>
</div>
</div>
Fiddle
When you do height:inherit, it takes the height value from the parent div, which is the same as saying height:100%. But this causes the div to overflow because there is another inner-div child inside the main container div, which is taking a height equal to the default line-height of the label tag. You can try giving the inner div tags separate heights:
HTML:(same as your markup, just adding classes so you don't have to give inline styling)
<div class="p">
<div class="c1">
<label>Test</label>
</div>
<div class="c2"></div>
</div>
CSS:
.p {
height: 100px;
width: 100px;
background-color: black;
border: 3px solid black;
}
.c1 {
height:20%;
background-color: red;
}
.c2 {
height: 80%;
background-color: green;
}
DEMO
You can do this with display:table property in CSS. See more
Add display:table to the wrap div and display:table-row for the children.
Working Demo
UPDATE
According that we don't want to use overflow:hidden
Updated FIDDLE
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Header</label>
</div>
<div style='height: 100%; background-color: green;'>
<label>Body</label>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
</div>
</div>
I have 2 divs beside each other. I would like to have both divs the same height. Possible?
Here is a JsBin as a starting point: http://jsbin.com/uhoqeb/edit#html,live
Thanks.
For this you can use display:table-cell property for this.
#leftSection, main-content{
display:table-cell;
}
Check this http://jsbin.com/uhoqeb/2/edit#html,live
But it's not work IE7 & below.
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html
add a container div
#macroSection {
height: 250px;
border: 1px solid #AAA;
}
then add the property "height" to the other 2 divs:
#leftSection
{
background-color: #fff;
width:170px;
float:left;
height: 100%;
border: 1px solid #c7c7c7;
display:block;
}
#main-content
{
width:250px;
overflow:auto;
height: 100%;
border: 1px solid #c7c7c7;
display: block;
overflow: hidden;
}
then wrap them in your html like this:
<div id="macroSection">
<div id="leftSection">
This is my left section
</div>
<div id="main-content">
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
</div>
</div>
You can also achieve this with javascript:
<script type="text/javascript">
document.getElementById('leftSection').style.height = document.getElementById('main-content').clientHeight;
</script>