Currently, when I add a line or two of text, everything that comes below the text within the div overlaps with the div below. I believe this is a positioning issue. What do I have to do so that I can add new content w/o worrying about divs overlapping?
It sounds like the item you are adding content to either has a height or max-height value set to it in CSS. If you remove those, it will allow the div to expand instead of running out.
Be careful though, as this might make other elements go wonky which will also need to be adjusted.
Use Samanime's answer, and to make navigation easier, set overflow=y: scroll or auto, so as long as contents overlaps the height you defined, the scrollbar will make possible to go around inside div. Like this:
<div style="max-height: 300px; overflow-y: auto;"> yourstuff </div>
Related
I have the following HTML code:
<div id="my_div" style="height:400px"></div>
<hr>
<input type="text" id="my_input">
my_div will be populated with data later (via jQuery) but the thing is that the
<hr>
appears behind my_div but my_input is where it should be (that is, after my_div).
Does anyone know why?
EDIT: A bootstrap css class (span10) was causing this problem. After I removed that class, it worked.
Give your div a position: relative value
<div id="my_div" style="height:400px; position: relative;"></div>
For testing purposes only, i would give your CSS a declaration of !important just to rule out any javascript/ bootstrap override
<div id="my_div" style="height:400px !important; position: relative !important;"></div>
A bootstrap css class (span10) was causing this issue. After removing it from my_div, it worked.
Judging from the information you've provided, I think it might depend on the content you're placing into it. As you can see here, the <hr> is displaying below the div, as it should.
One case I can think of that might be causing this is if you're inserting content that is floated using CSS inside the div. In that case, the div will "shrink" to the height of the last in-flow (not floated) element it contains, which will make it shrink to a height of 0 if there are no non-floated elements inside it.
If that is your case, then you can work around that by adding the following CSS to your #my_div:
#my_div {
overflow: hidden;
}
There are also other workarounds for this kind of problem, but this one is the easiest to try out in order to check if that's the problem affecting you.
Another issue that could possibly be affecting you is that the height of the div is restricted to 400px. If the content of the div exceeds that height, it won't push the div's boundaries down, but instead it will overflow (quick demonstration). If that's the case, you can either set the div's height to auto, so that it will stretch along with the content, or you can make sure the content won't get past the div's height by tweaking it.
set the position of both to relative and see if they appear properly
It's because your div has fixed height of 400px. It may be overflowed by the content, but it can't move other blocks further than its specified height. Probably you need to set to it min-height: 400px instead of height: 400px.
A div without content is displayed as height=zero. Try inserting a
inside the div so that it is displayed as 400px in height initially.
i think jquery first remove your "my_div" then append to your container.
try this fix
<div id="yourContainer">
<div id="my_div" style="height:400px"></div>
<hr>
</div>
$(document).ready(function() {
$('#yourContainer').find('hr').remove();
$('#yourContainer').append('<hr />');
});
I've been trying to make a horizontal web page. However I don't want to keep setting the width to a certain width to accommodate the content that is floated is there a way to have the Div automatically re-size to the content that it contains? This way all the content is floated or "horizontally" scrolling? I'm using width:"specific size" but as soon as I have too much content it overflows is there a way to not have that happen and also where I don't have to specify a specific width size?
EDIT:
What I want is the whole website to be horizontally scrolling. I don't want just the specific div itself to have scrollbars, but I want the div to be able to adjust it's width to accommodate the content no matter if I have 3 divs within it or if I decide to add 6 divs later into the div.
For example what I want is like this. (Where even if I have more content it won't drop to the next line) I mean can this be achieved with css alone?) I specifically want that effect where the whole website is scrolling not just the div I don't know exactly if that website is doing that. Basically I want the whole website to scroll horizontally not just a scroll bar on the specific div itself.
For example vertically if you have more content you can keep scrolling down that is what I want, but I want that in a horizontal scroll of the website is that even possible?
Here is my code Jfiddle Code which is for tumblr but I want this for more than just tumblr. As I'm thinking of doing this for a regular website but where I manually will add more list items or Divs. I just want to see if there is a way to have the width adjust to the content so the floated content doesn't drop to the next line.
I think what you need is display: inline-block;
Like this: http://jsfiddle.net/ZDJbH/
Check this fiddle , is that what you need
div{
width:auto;
overflow:auto;
white-space:nowrap;
}
Set the css width property to auto
#yourDiv {width : auto;}
1.display:inline-block
2.float:left or float:right Because it will destroy line box.
3.position:absolute；（and without top, left or position:absolute) May be need to know information to use it.
I have these sections with headings, where the background goes outside the box (to look like a ribbon). But the height needs to be adjustable to accommodate long titles, and the inner container would go outside of hte containing div. So I put an overflow:auto on the outside div, but that cuts off the outside part of the ribbon.
Any ideas?
http://jsfiddle.net/S2p83/
You could insert a breaking element right before the close of the inner container you want to stretch (something like <div style="clear: both;"></div> or <br style="clear: both;"> BUT, that's adding unnecessary markup.
Your better (and more proper, in my opinion) option is to fix it in CSS. You'll want to use a clearfix on the overall container. Your best option is to add a CSS clearfix class. I prefer the "Micro Clearfix" hack, which I applied to your code here:
http://jsfiddle.net/N2Mh7/
EDIT: Pre-clarification answer:
You'll need to let the height size itself. So, set a min-height and use background-size (but be careful with backwards compatibility) to stretch the background.
The problem is, your background isn't going to stretch well. So, you might want to rethink how much text you're going to allow in that banner.
Here's an updated jsfiddle:
http://jsfiddle.net/Dmm34/
I'm trying to follow CSS How to set div height 100% minus nPx but for some reason it is not working.
I'm new to web development, so I apologize if I am doing everything in the most horrible way imaginable.
Here is the page: http://glados.cc/chat/layout.htm
The sidebar should be at the right, not sure what I'm doing wrong as I'm following the stackoverflow question I linked to at the top.
The text does wrap if it is too long, which is good! But the height that is taken doesn't increase, which makes it overlap the next line.
Also there are no vertical scroll bars (unlike the stackoverflow answer I linked) when the content gets too long..
Thank you!
The scroll bars can only appear if there is a height or maximum height set. If that is not the case, they simply expand.
Add something like height: 300px;
As for the wrapping of the chat text. This text is positioned absolute, so it is taken out of the flow of the document and cannot push other elements lower. You maybe want to consider using margin-left instead of position:absolute and left on .chatText.
And, as DrStrangeLove pointed out, your sidebar is missing the absolute positioning.
Here is an example:
http://jsfiddle.net/3YrZT/1/
try position:absolute for sidebar and middlePart
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.