I was trying to make a scrollable with a fieldset but then the scroll is not working. I'd like to make a scroll because when the text is already not seen the scroll in mozilla firefox is not display also. That's why I'm trying to put or insert a overflow in fieldset but not working...
Here's the sample code I'm using.
<div class = "sam">
<fieldset>
<legend>test</legend>
space
space
<br> space
<br> space
</fieldset>
</div>
CSS
.sam
{
overflow:scroll;
}
thanks..
You need to set the height of .sam. Otherwise it will just grow with the content. Also, you can use overflow: auto to have the scrollbars show up as needed.
if you use overflow must use the height otherwise the form will be extend to outward from the field set
Related
I have a sidebar within a larger page. So I created a div with float:right and width:30%. Inside the div is a pre. Depending on the size of the browser window, the pre may be wider than 30%. So the text flows off the right edge of the sidebar.
overflow lets me say to put on scroll bars. But what I really want to do is let the div grow to fit the width of the pre. But I can't just set the width to auto because there is other text inside the div, and if I make the width auto it will fill the width of the screen rather than being a sidebar.
Is there any way in CSS to set a minimum width but let the box grow to accommodate a pre, a long unbreakable string, etc?
Update
Okay, someone asked for the code. Here's a slimmed down example that demonstrates the issue.
<html><title>Sidebar Test</title>
<div style="width:50%;float:right;border:1px solid black;">
<p>Here is some text for the sidebar. La di da di da. Here's more text.</p>
<pre>
This is a pre with a fairly long line.
</pre>
</div>
<p>Here's the non-sidebar text. Write a few lines worht of text here. Here we go.
Lorem ipsum whatever.
</p>
</html>
Paste that into a file, then shrink the window and you'll see that "this is a pre with a very long line" will extend outside of the sidebar.
you have display:table/inline-table that will help to shrink/espand the box to its content.
You could as well set a min-width instead a width to allow the floatting box to expand.
example with display:table added to your snippet
#preonboard, #preonboard pre {
border:dotted;
display:table;
}
demo http://codepen.io/anon/pen/aqrIj
content around pre, will make this floatting box grow as well . You could set a max-width for these other content.
If you set the display of the containing div to display: inline-block; then it would grow/shrink according to the width of its child.
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
Normally I wouldn't post here for such a small question but I've tried everything I can think of. I've literally spent the past hour trying to make this work, vertical-align, padding up and down, etc. I'm sure it's easy.
http://jsfiddle.net/vWzZz/
Thanks for any help.
Remove the "float:left" from your button and it will be centered.
If that's not an option in your deployed environment, surround all the labels in a new div and add a margin-top or padding-top to that div.
wrap it with some div and try inline
.someButton,.someText
{
display:inline-block;
}
<div class = "someButton">
<input type=button />
</div>
<div class = "someText">
some text .....
</div>
Use a negative margin on the top. The button is taller than the other items on the line because of the added padding and other box-model elements.
margin:-4px .7em 0 0;
To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.
In other words:
CSS:
.box {
min-width:170px;
}
.box span.title {
font-size:24px;
white-space: nowrap;
}
.box span.text{
font-size:10px;
white-space: normal;
}
HTML:
<div class="box">
<span class="title">Title on one line</span><br />
<span class="text">This is the main body of text which I want to wrap as
required and have no effect on the width of the div.</span>
</div>
However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)
Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.
Is this (jsFiddle) what you're trying to accomplish?
I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.
Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.
A working jQuery example:
http://jsfiddle.net/8AFcv/
$(function() {
$(".box").width($(".title").width());
})
For headlines you should use the <hN> tags (<h1>, <h2> etc).
For no text wrap:
white-space: nowrap;
On the element who's text you don't want to wrap.
Working Example on jsFiddle
If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:
$('.text').width($('.title').width())
and run it at jQuery(document).ready or by event if you add it dynamically
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.
A pure CSS solution for this is unlikely without setting a max-width on the div.
A pointer on CSS:
Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.
I have been trying to add a scroller to my context section that will only allow the box to scroll horizontally within the visible of the viewer's screen, not vertical.
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
Also, here is a link to a website that has the exact scroll effect I am trying to recreate: http://patrickhoelck.com/home.html
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
'overflow: auto' will add the scroll bar when necessary.
The trick is to make sure the content inside the scrollable element exceeds the normal width of the element, instead of simply reflowing onto a new row in which case it'll never trigger a scroll bar. One way to do this is by using 'white-space: nowrap'.
You probably want to take a look at overflow-x: scroll, which, along with setting a fixed size on the parent, will force a horizontal scrollbar if the content is too wide.
Some example html:
<div style="width: 50px; overflow-x: scroll">
<p>Hello world!</p>
<p>Here is a div with a horizontal scrollbar!</p>
</div>