Okay I have this html
<div id="div1">
<p id = "a">
<! -- content -->
</p>
<p id='b'>
<! -- content -->
</p>
</div>
And this css:
div#div1 {
width: 50%;
height: 200px;
}
paragraph "a" breaks parent div boundaries and runs into paragraph "b" as if "floated". Same thing happens when I set the height of the paragraph element to 200px.
How come? I just like to know. Thanks much!
If you set the height of the paragraph, the paragraph will really have that height. The only problem is that the paragraph's content may not fit into the paragraph and overflow, as illstrated by this fiddle: http://fiddle.jshell.net/22uk19hf/
You can control what happens to overflowing content via the overflow CSS property:
visible
: Default value. Content is not clipped, it may be rendered outside the content box.
hidden
: The content is clipped and no scrollbars are provided.
scroll
: The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto
: Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
Related
I've just created some articles in an HTML5 file. Those articles contain images. The articles also have a border at the bottom.
Now I have this problem that whenever you re-size your window to make it larger, the images go outside the border. I want the border to re-size with the image.
Here's an example of how an article looks like in my page:
<article>
<p>
<img image />
</p>
<p>
text
</p>
</article>
The p-tag with the image inside floats left, the p-tag with text floats right next to it.
To be more clear: I want the article tag to resize to the height of the image.
Just guessing, without seeing a working example or any of your CSS, but adding overflow: auto to the article element will cause it to contain its floated children:
article {
overflow: auto;
}
Example that may or may not relate to the CSS we can't see: http://codepen.io/paulroub/pen/opnfG
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.
I have a construct like the following:
<div class="content">
<div class="menu">--- mymenu ---</div>
<div class="edit">--- myeditor ---</div>
</div>
The menu and edit classes are display:inline so they will sit side by side.
I give the user the option to 'scale' the editor (using css scale) but when I do, the content div remains the same height as the un-scaled edit div. The edit div has set width and height, bit is then modified with something like:
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
which works fine for scaling the edit div, but the content div won't scale to accommodate it. I can make the content div overflow:visible and that will show the contents of edit, but overwrites anything below it on the page.
How can I get my content div to scale when I scale the edit div?
I have the following structure:
<div id="wrap">
<div id="container">
<div id="header">
</div> <!--close header-->
<div id="main">
… etc
I'm trying to display a background image that will show the full height of the image, but not force the page to scroll as a result of it but that will scroll with the page content.
I've placed a #bgimage div after the opening tag of the #container div and I've tried the following CSS:
position:fixed + height:100% - displays the full height of the image but doesn't scroll with the page content
position:absolute + height:100% - scrolls with the page but cuts off the image where the page content ends
position: absolute + height:1000px - displays the full image but forces the page to scroll
Any idea?
Thanks
Set the background on the body itself. CSS3 allows you to set multiple backgrounds in case you already got one. Although this doesn't work in IE8 and before.
[edit]
Since that doesn't work in your page, try to make the bgimage div a container for your page content without specifying an exact height. Set the min-height to 100%.
That way, it should size to the page content. It will always reach to the bottom of the window, and it won't force scrollbars when they're not needed. The min-height causes the div to fill the window in case the content is smaller than the window height.
Use background-attachment: fixed; it will scroll with the page.
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>