I'm looking for something such as:
width: (200px or content width)
Any ideas?
[EDIT] Added a fiddle showing the problem: http://jsfiddle.net/9fhtsgfd/
<div> is display: block by default, meaning it will take up full width. If you want it to only take up the space of its content you can try inline-block instead.
Then, if you only want the <div> to stretch up to X pixels, you can use max-width.
div {
display: inline-block;
max-width: 200px;
background-color: blue; /* for illustration only */
}
<div>short content</div>
<div>longer content here longer content here longer content here longer content here longer content here longer content here longer content here </div>
As you can tell, this also puts the divs next to eachother.
Sounds like you are looking for the css property min-width
min-width:200px;
width:auto;
Sorry maybe i read the question wrong.
max-width:200px;
display:inline-block; //xec is correct inline-block instead of display block lets it adjust from 0-max-width. I was missing that piece until he posted his answer. His is correct.
This will take text and wrap it at 200px wide but the container will expand from 0 px up to 200px. If it is not behaving in this way then you likely have other css causing problems.
Related
I have a DIV defined thusly:
<div id="divContent" class="content" style="margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
The contents of the div are complex and varied, including lots of different html and css. All I want is to force the contents of the div NOT to wrap, so that as you drag the right edge of the browser window in toward the left edge, content may disappear off the right side, but never wrap.
I have already tried applying this CSS on the divContent div, and also on sub-divs inside divContent, but it did nothing:
white-space: nowrap
What options do I have?
<< EDIT >>
Here's the actual web page.
Here's how it looks (correctly) before making the page smaller:
Here's how it looks (wrongly) after making the page smaller, and it starts wrapping:
Adding overflow:hidden to the element's style, will cause any text that would have flowed out of the div to be hidden. you should remove it and replace it with white-space:nowrap
<div id="divContent" class="content"
style="margin-left:239px;min-height: 100%;
padding: 130px 80px 30px 80px; white-space:nowrap;">
Ok, thanks for adding a link to the code. My, do you you have a lot of stuff in that div? (It always helps to give the full picture with a question!) And that's the problem - specifically the label/input field pairs. These are inside dd elements, which are inside a div with class = column-thirds. That has a percentage width, which means they shrink as the window shrinks.
But there is nothing to stop the input fields dropping under their labels as the columns shrink in width. So that's what you need to stop. Adding nowrap to their containing elements (the DD elements), and a width as well to stop the label and field overflowing the end of the DD element, should do it:
dd {
white-space: nowrap;
width : 400px; /* choose your width here to be wider than the label + field */
}
to stop these items wrapping. (And check there is no float property on the labels or input fields, which might also be part of the problem).
[Further edit]
Unfortunately your setup is rather complicated. So to show the nowrap solution is basically correct: do a small test, with a bank page containing just one of your label field pairs:
<dl><dd>
<label for="txtFirstName" id="lblFirstName" title="First Name" data-required="true">First Name</label>
<input name="txtFirstName" type="text" value="Frankie8" id="txtFirstName" data-capture="DLFirstName" style="width:131px" />
</dd></dl>
and some CSS:
dd {
margin-left: 400px;
border:2px solid black;
white-space: nowrap;
}
Then narrow your window until the right window margin overlaps the field, then comment out the white-space line; you'll see the field drop down under the label. (I've tried it, it works as expected). Hopefully that shows what the basic problem to solve is.
However, looking through your CSS files I see you have a media query in the LESS file Style.less (look for #media around line 1976), that redefines labels as block elements, using display: block. That stops the above nowrap solution working. Labels are normally inline elements. So either you need to be able to get rid of that display change if you can, or find another solution.
An alternative solution would be to give the containing divs (the class = column-thirds ones), a min-width to stop them shrinking so much they cause your wrapping problem in the first place. The only other thing I can think of might be floating the labels, but I wouldn't like to bet how that would turn out.
I hope this all helps you obtain a suitable fix for your problem.
You need to set the width to the size you want the div to be, in px units, e.g.:
... width: 500px; ...
Then, if the screen gets narrower than that, the div will disappear off the right of the screen as required, regardless of the overflow setting.
It often helps in problems like this to give all the divs borders temporarily, eg with: border 1px solid red; so you can see what's happening.
Overflow only comes into play if you fix both the width and height of the div, and the text is too long to fit in that box - it will then spread down below the div. White-space looks as though it works, because it makes the text stick to one line, until you give the div a border and realise that the div still ends at the edge of the screen (however wide that may be at any given moment) and the text now extends beyond the end of the div (which you can see if you add the border, and remove the overflow hidden).
So fixing the width of the div, if done right, should work (I've used 500px, but change that to whatever you want):
<div id="divContent" class="content" style="width: 500px; margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
However, a lot depends on what content you have in your div, and what CSS they have, so if fixing the width like this doesn't work, give us those as well, please.
In CSS, I've never really understood why this happens but whenever I assign something a margin-top:50%, the element gets pushed down to the bottom of the page, almost completely off the page. I would assume with 50%, the element would be halfway down the page.
That also happens with setting the width and height attributes of elements. If I set the width of a div to 100%, the right side of the div goes off the viewable screen and I have to scroll to see it.
Why does that happen and is there a way to fix it?
EDIT:
Here's my css code. I'm also using bootstrap but this is an issue I've noticed outside of bootstrap.
html{
height:100%;
min-height: 100%;
min-width: 100%;
}
#button_container{
width:100%;
clear:both;
margin:0 auto;
margin-top: 25%;
}
#donate_section, #contrib_section{
display:inline;
}
#contrib_section{
float:right;
}
Boiler plate HTML markup:
<body>
<div id="someid">
<div>
<a></a>
</div>
<div>
<a></a>
</div>
</div>
</body>
Read this, and then read it again: http://www.w3schools.com/css/css_boxmodel.asp
Your 'width' setting is setting only the content section - so your total width is content+margin+padding+border. So if width=50%, you really have more like 55% or so after all that (with normal, smallish margins/padding/border). If you want your div to externally take up only 50%, you need to have a no-padding/margin/border div that's 50% outside it, or any number of other solutions.
You also probably are dealing with the fact that browser rendering isn't perfect. If you want to avoid scrolling, you in general shouldn't use 100% of the width. (This is also good "Web 2.0" design, if you follow that school - you should have white space on both sides from a usability/readability standpoint).
Edit: Also, your % is relative to width, not height. See for instance, CSS fluid layout: margin-top based on percentage grows when container width increases .
The reference is often "relative" to the parent element. Unless you are speaking about the first child of the body tag.
I have an HTML page that for the sake of this question looks like this:
<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>
Note the "very long line", and the background color of that div.
My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.
Basically I want my div to behave like this:
To have the specified background color
To minimum have the same width as the screen, even if the text within is just a few words
To follow the width of the text, if it is more than the width of the screen
Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?
Did that make any sense?
Is there any way to do this?
I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: http://www.vkarlsen.no/test/test.html
I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:
iPad background for div blocks not spanning entire width of screen
Tried the suggested <meta ... viewport .../> tag, did not make a difference (it is present in the test page right now.)
Background color stretches accross entire width of ul
<div>s are already block elements
WebKit doesn't paint background-color for entire width of final inline list item
Tried setting the div to display: inline-block; but this did not appear to change anything
black magic:
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.
The problem seems to be that block elements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making them inline-block elements apparently resizes their width to their actual content.
HTML:
<div id="container">
<div class="wide">
foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="wide">
bar
</div>
</div>
CSS:
.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }
(The containerelement addresses your follow-up question to make the second div as big as the previous one, and not just the screen width.)
I also set up a JS fiddle showing my demo code.
If you run into any troubles (esp. cross-browser issues) with inline-block, looking at Block-level elements within display: inline-block might help.
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }
You can try scroll or auto.
The inline-block display style seems to do what you want. Note that the <nobr> tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:
div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }
Alter your stylesheet, remove the <nobr> tags from your source, and give it a try. Note that display: inline-block does not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)
It is because you set the width:100% which by definition only spans the width of the screen. You want to set the min-width:100% which sets it to the width of the screen... with the ability to grow beyond that.
Also make sure you set min-width:100% for body and html.
The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.
To maintain the minimum width: min-width:100%
Try this,
.success { background-color: #ccffcc; float:left;}
or try this,
.success { background-color: #ccffcc; overflow:auto;}
I have a simple HTML layout:
<div style="position:relative; width:200px">
<div style="position:absolute; top:0; left:0; background-color:red; z-index:-1; width:100%; height: 100%"></div>
Some text goes here....
</div>
Something like this works fine in all the browsers, except for IE6. As the text is added the top div is stretched and absolutely position div is stretched as well. But in IE6 the absolutely position div will always stay only 1 line in height. I know that IE6 can't dynamically recalculate sizes, and because of that you have to set height: 100% on the body tag if you ever want to use height: 100% anywhere on the page, but in this case, I can't set height:100% on the outer div, since I want it to be just the right size for the text inside of it. Any help?
Add overflow: hidden; to the absolute div.
This is a known bug in IE6 but for the life of me I can't recall the solution. I'll look it up but, off the top of my head, try adding 'line-height:1', or some value, and see if it fixes it.
After a lot of testing and investigation, I came to a conclusion, that there's no way around this issue for IE6, other than JavaScripts, which doesn't work for me. So I had to change the structure around a bit. The end result looks something like this:
<div style="position:relative; width:200px; background-color:red;">
<div style="margin: -10px -20px">Some text goes here....</div>
</div>
This way the content of the inner div is going to set the height of the inner div and negative margins on it, will make sure that the outer div is always 20px bigger in height and 40px bigger in width the content div. I know the answer doesn't make sense when looking at the question, but it works exactly the way I need it too, since it allows me to create multiple divs on the background (outer div) with images and then adjust content div with negative margins, so that it occupies the same amount of space as all of the background divs.
I have a div with two nested divs inside, the (float:left) one is the menu bar, and the right (float:right) should display whatever content the page has, it works fine when the window is at a maximum, but when i resize it the content is collapsed until it can no longer has any space, at which it is forced to be displayed BELOW the left menu bar, how can I make the width fixed so that the user may scroll when resized?
(css width didn't work, i alternated between floating the right content and not), here is the code:
<div style="width:100%">
<div style="float:left; background:#f5f5f5; border-right:1px solid black; height:170%; width:120px;"></div>
<div style="margin-right:2px;margin-top:15px; margin-bottom:5px; width:100%; border:1px solid #f5f5f5"></div>
</div>
I only need to have this working on Interner Explorer for now.
This should do it (container is the parent div containing that 2 divs):
.container {
width: 1024px;
display: block;
}
You may want to set a width on the containing div and set your overflow property
#containing_div {
width: 200px;
overflow: auto;
}
Also use the min-width property on the page if that makes sense, however that CSS property doesn't really work with IE6, this is usually what I do in that situation (supporting Firefox, IE7, IE6, etc)
#container {
min-width: 1000px;
_width: 1000px; /* This property is only read by IE6, which gives a fixed width */
}
Well, putting a width or min-width property is the way to go.
Now, without an example, or a link of the actual page, it's a bit tricky to answer.
Simply don't make the right div floating. Menu is already floating left of any other content. Just set a left-margin for the right div so the content in that div won't be wrapped around the floating div.
if the two divs are taking up 100% of the available width, could try to use percentage width and display: inline with a further div with a fixed min-width/width (boo IE) inside where required.
this is rather difficult without some HTML to go on
Your containing div should have a width wide enough to contain both inner div's
So if your two inner div's are 300px each and assuming you have no margin/padding on them then you should set the outer div to be 600px;
I'm a bit confused:
Fixed width means the width of a node will not change. Never.
You say you want to scroll when the screen gets too small for your content, so I think you mean the exact oposite of fixed width.
If my assumption is right, you could as mentioned before go for the percentual widths.
Watch out width the suggested "min-width" solution because it is not supported all that well.
<div id="container" style="width:100%">
<div id="primaryNav" style="float:left; width:150px; background-color: Orange">someNav</div>
<div id="content" style="margin-left: 10px; background-color: Red; overflow: auto;">
loadsOfSuperInterestingContentI'mSuperSerious<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Seriously
</div>
</div>
This should be pretty cross browser