I have a <div> called big box that contains another <div> called small box. Each small box contains an image and text wrapped inside a separate <div> I also have a diagram to explain my situation.
http://s21.postimg.org/4thwzlt9j/Untitled.jpg
The problem is when the text is larger than the div wrapping it. If I create another small box, It will overlap the above small box.
How can I modify the CSS so if the elements such as the text go over the <div> the small box won't overlap it.
http://s18.postimg.org/kqkqlp6w9/Untitled.png
I don't want to use margin because it is fixed. What happens if one small box has only 3 words of text and there's a huge margin at the bottom?
How can I make it dynamically, so if the text is bit over, the second small box won't overlap it but will instead adjust it's size so it will be at the bottom with space?
.bigbox {height: 700px;
width: 950px;
background:#FFFFFF;
border-style:solid;
border-color:#D5DADA;
border-width:1px;}
.smallbox {text-align:center;
height:300px;
width:250px;
background: #FFB236;
position:relative;
left:0px;top:0px;
margin-bottom: px;}
.imagebox img{margin:6px 6px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;}
My HTML
<div class="bigbox">
<div class="smallbox"><div class="i"><img border="0"src="im.jpg" alt=""> </div>This is the text and it is wrapped inside a div. </div>
<div class="smallbox"><div class="imagebox"><img border="0"src="im.jpg" alt=""> </div>This is the text and it is wrapped inside a div.</div>
Simply removing the height attribute of the .smallbox worked for me.
The problem with specifying a fixed height is that it simply does not allow the div to expand such that all the content fits inside.
If there is more content than what the div can hold, it overflows. The overflow can be visible or hidden depending on how you specify it, but it does not change the layout and does not act as content.
http://jsfiddle.net/wtBUd/
Related
sorry if this question looks duplicate, but those explanations were in some way different from what I was looking for.
I have a DIV that is displayed a table. It has two DIVs as cells which also have their own DIVs inside.
<div class="theTable">
<div class="theRow">
<div class="cell1">
<div class="cell1Content">
cell one content
</div>
</div>
<div class="cell2">
<div class="cell2Content">
cell two content
</div>
</div>
</div>
</div>
Now, when by any means (such as writing, or changing attributes), I enlarge the content of one of these cells (say cell2) instead of the content being enlarged from downward, and filling the area of the parent DIV (which is a cell), what happens is that the parent DIV actually expands from top. This behavior is not desired. I want the parent DIV to stay the same size, and the content to resize from bottom (downward).
I know this can be achieved using, position:relative, top:2em, but that's not what I am intending to do, because I do not want to disrupt the flow of the document, rather a simple answer as to how to get round this problem.
As in the case above, the CSS file is like this:
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell}
.cell2 {display:table-cell}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
If you change the last line (margin-top:0em) you'll see, it is not only the child that is changing size, but also the parent. I don't understand why? And what can be done about it?
So what you want is that the cells start from bottom to grow upwards right?
Something like this could solve it:
http://jsfiddle.net/7y19n8eh/
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell;vertical-align: bottom}
.cell2 {display:table-cell;vertical-align: bottom}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
What I did was to add vertical-align:bottom to the cells.
The vertical-align property sets the vertical alignment of an element and is compatible with all major browsers.
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
I am new to Css. I have an HTML page.
<body>
<div id="viewer">
<div id="flow">
<img src="images/beatles.jpg">
<img src="images/blink.jpg">
<img src="images/doves.jpg">
<img src="images/flash.jpg">
<img src="images/floyd.jpg">
<img src="images/jurassic.jpg">
<img src="images/naked.jpg">
<img src="images/prodigy.jpg">
<img src="images/xx.jpg">
<img src="images/zabiela.jpg">
</div> <!--end of <div id="flow"> -->
<ul>
<li id="left">
Left
</li>
<li id="right">
Right
</li>
</ul>
</div> <!--end of <div id="viewer"> -->
</body>
Each image is 200x200. Now i am confused with the css of it. Here i show it step by step
#viewer {
width:700px;
height:220px;
padding:100px 0 30px;
margin:auto;
border:1px solid #000;
position:relative;
}
You define width and height of main Div. Define padding, means each element that is place inside div will place 200px from top, no sapce from left and right, 30px space from bottom of div. Also i want to ask here we define position relative. Is it relative with respect to body or html?
We didn't define the #flow div width and height. So it calculated by the padding. The #flow div width is same as the #viewer width, but place 30px below from top of #viewer div, it's height is 190px, place 30px above from bottom. Please tell me if i am wrong.
#flow:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Now we are defining content that we want to enter after the #flow div. We set it's visibility hidden, means it is there, taking up the space but not showing. Is it? The thing that i want to ask here is this, that we are using clear:both here. What are we clearing here? we didn't set any float property in the #viewer div?
Now comes the confusing part
#flow img {
display:block;
margin-left:-165px;
position:relative;
top:-15px;
left:245px;
float:left;
background-color:#fff;
}
Now we are setting images, that are in the #flow Div. First thing that i notice which is confusing that if i set it's top property to 1px. Then it align with respect to # flow div. Which is fine because it's position is relative, and it is inside #flow div, so it is aligning with respect to #flow div.
But when i change it's left property to 1px. Then it goes beyond the both divs(#viewer and #flow). Align itself somewhere between the mid of scree left corner and left of div. Why it is happening. If it's position is relative, then it should remain inside the #flow div. This is my confusion.
Also images are shrink to accommodate inside the div. I think it's because of the dov size. That each image is 200x200. Our #flow width is 700px only.
Another thing we set margin-left:-165px;. Right now images are arrange horizontally and also shrink to accommodate in the div. But if i change to margin-left:165px;. Then images are expand vertically and all images are shown. Images are not shrink. Also we set top:-15px;. When are we set values in negative?
It's not an assignment or homework. I am just practicing and i want to know how things are working. Here are the remaining css
#viewer li {
list-style-type:none;
position:absolute;
bottom:10px;
}
#left {
left:20px;
}
#right {
right:20px;
}
Thanks
A good start to find out how the css works is to install firefox with firebug. In firebug, you can hover over elements to see their styling.
Secondly, I would place the images in li tags for better organization.
Just checking to see whether there's a way to do this in CSS before I get my Javascript on!
In the example, the #fixed div gets filled with content dynamically - so we never know how big the content in that div will be.
The beginning of the #absolute div must always be rendered underneath the #fixed div. The #absolute div also gets filled with lengthy content dynamically, so the user must be able to scroll the content in that div, no matter how big it gets.
Without knowing the size of the #fixed div, is there a way using only CSS that we can keep the beginning of the #absolute div underneath the #fixed div?
XHTML:
<div id="right">
<p>This div is just here to force a scrollbar.</p>
</div>
<div id="fixed">
<p>This div gets filled dynamically with content of varying length</p>
</div>
<div id="absolute">
<p>This div also gets filled dynamically with content of varying length,
and needs to stay underneath the div above.</p>
<p>This div will sometimes get so high that it stretches below the bottom of the page,
and because it's inside a fixed positioned div the user won't be able to read all of its content.</p>
</div>
CSS:
#fixed {
position:fixed;
border:2px solid green;
width:200px;
display:block;
background-color:white;
}
#absolute {
position:absolute;
border:2px solid red;
width:200px;
margin-top:90px;
z-index:-1;
}
#right {
position:absolute;
right:0px;
width:200px;
height:4000px;
border:2px solid blue;
}
Without knowing the size of the #fixed
div, is there a way using only CSS
that we can keep the beginning of the #absolute div underneath the #fixed div?
No. CSS cannot help you here.
The absolute/fixed elements are ...
removed from the normal flow entirely
([and have] no impact on later siblings).
and:
the contents of an absolutely
positioned element do not flow around
any other boxes
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning