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?
Related
For my site, I need an area to sit along the edge of the viewport to reveal a menu when dragged. The div that defines that area cannot be position:fixed, and I am trying to accomplish this without javascript.
Here's my basic html:
<div id="content" class="snap-content">
<div id="toolbar">
<h1>Default</h1>
</div>
// Content
<div id="do-drag"></div>
</div>
That #do-drag div I need to sit along the left edge of the viewport, running top to bottom, about 25px wide, regardless of how much content there is. It cannot be position:fixed. It needs to always be there. And the drag div must sit inside the content div.
Now, I see two possibilities:
A 100% tall absolute div that doesn't actually scroll, or...
A div that scrolls, but that is never shorter than 100% of the viewport
I have tried placing the #do-drag inside of another div and mixing up absolute and relative positioning. I have tried extending the drag div to 800% and using overflow settings to clip it. These, and a couple other attempts, have failed.
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.
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.
How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/
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>