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.
Related
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 multiple divs with a fixed width containing <p> tags which contain various lengths of text.
I want this text to remain left-aligned but if the text does not take up as much space as the div width, I would like to align this text centrally.
I assume the best way of achieving this would be to horizontally center the <p> within the div while keeping the text left-aligned but I'm not sure how to do this.
I have tried setting margin:0 auto;but the <p> always resizes to the width of the div (unless I tell it otherwise, but I don't want to do this because if the text runs for longer than the div I don't want to break it early...)
I've set up a JSfiddle here to demonstrate: http://jsfiddle.net/VDhUa/
(Basically in this example I would like to "Lorem ipsum..." stuff to be centrally aligned without using text-align:center;)
Any Help would be greatly appreciated.
Thank you!
Set your outer div to text-align: center; and your inner p's to display: inline-block;
Fiddle: http://jsfiddle.net/ZL4GM/
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.
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 a simple design. To the left is the navbar, to the right is the content div. I just did float left and float right and it works - unless the monitor is too wide. Then the navbar is far off to the left (like it should) but the content clings to the right. The middle is empty space. I want the content to cling next to the navbar on the left.
How can I accomplish this?
How about floating them both to the left and use percentage values to set their width..
Like below:
#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}
Or if you want to fix the size of your sidebar and have the content fills the rest of the space you can do the following(I use it all the time):
HTML:
<div id="content"><div class="in">
CONTENT HERE
</div></div>
<div id="sidebar">
SIDEBAR HERE
</div>
CSS:
#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
#content .in {margin-right:300px;
/*sidebar's width or more for space between blocks*/}
There are lots of method to do that.
It depends :
if you want a fixed width layout, or a relative one.
if you want the layout to be centered or not.
etc.
A sketch of what you want or/and your actual code would help.
Anyway, if you're not aware of CSS layout, you could use a CSS framework like blueprint which is easy to use and takes care of your current problem by itself.