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.
Related
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>
On this site here:
http://acp.studevent.co.uk/
I have a fixed div at the top which will act as a menu and a content div below containing everything else. I cannot figure out how to use overflow-y: scroll so that the pages scroll bar is only used for the content div and ignores the header div at the top.
PrimeFaces's layout/layoutUnit components do exactly what you needed. And if I'm not mistaken, they use javascript to calculate and set an height to the content. Each time you resize your page it recalculates the values.
You can check their showcase:
http://primefaces.org/showcase/ui/layoutFull.jsf
I dare say, you need to set a fixed height for overflow-y'to work. And one way to make it dynamic is to somehow calculate the necessary values.
Also you could make them have dynamically calculated fixed heights by using css positioning and left-right-top-bottom properties.
Best regards..
What I want to do is have a way to horizontally scroll through the icons on the top bar. No matter how I try to implement overflow I cannot get it to work. Here is a link to the page. Link no longer exists.
Note: that the scrollbar shall not cover the background image at all. It should be immediately below.
You need to set the width of that header div to be wider (width:2000px;). If you want a dynamic width (you dont know how many boxes will be in there) then you'll have to calculate the width with javascript (or serverside code like PHP).
Giving the .browser div a width of 2000px does the trick... then adjust the height of your divs to be tall enough to show the whole icon and name.
Let me know if that makes sense...
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.
I have a page with two divs on it which should fill the entire screen.
Both of them have width = 100%
The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.
The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.
Like this:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
How do I do it with CSS?
Update:
I'm looking for a solution that would not require me to set the fixed height for the upper div.
Is that possible?
this should fix your problem
#header{ overflow: hidden }
#content{ overflow-y: auto }
edit: you have to define the height of the divs aswell
In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.
.content {
height:90%;
overflow:auto;
}
Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.
The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.
With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.
Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.
You should define fixed width for second div and use overflow css property to define scrollbars.