simple question
if I make a div with border all way round with some text in, the div box will only be as wide as the content.
how do I make it that the div always stretches 100% of the screen across, even if nothing inside it.
I understand min-width doesnt work with IE, is there a safe, stable way to do this?
No, a <div> will always take up the 100% of width unless a style(css) alters it.
Keep in mind that a <div> is a block element.
If you set the display value of <div> to be inline, for example, it would only take up the width of its content.
Example:
.myDiv
{
display: inline;
}
<div class="myDiv">I will take up width of my content only</div>
On the otherhand,
A <span> will only take up as much width as the context because its an inline element.
Here is an example.
jsFiddle
Related
Here is the prototype I am trying to implement
Here is what I have right now.
I learned from my previous question Side to Side How to align the column of options with the picture - using display inline block attribute- Display.
Now I am trying to align the picture so the picture doesn't stretch past the entertainment option like in the prototype. Here is JSFiddle
Seeing that a block element like div "occupies the entire space of its parent element" - Block Element, the Css Height attribute made the most sense to me to use here.
Here is my code for setting height in both the image and the div containing the image
The div
.sidebar {
display:inline-block;
vertical-align:top;
width:70%;
height:3%;
}
The image
#laptop {
width:100%;
height:3%;
vertical-align: bottom;
}
The 3% was just a hardcoded test value but in both instances, the height of the image didn't change. I saw another thread on this - Height Thread but that one said to adjust height as well.
Does anyone know to scale the height of the image in this situation?
How I solved this issue was I realized that by definition, a div is a block element that "will expand naturally to fit its child elements".
So going off that, I played around with the css width and height attributes and found a height that would cause the image to line up with the entertainment component.
If anyones curious, here is my final img html tag code(height of 240 pixels)
<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" />
Taking a shot in the dark without looking at all the code. How are you creating your image, in an <img src=""/> tag or as the background of a div via the css attribute background:url("image.png");? The height and width percentages reference the dimensions of that elements parent element. I'm going to assume that your image has no parent element/container, or that the parent/element container is not set to specified height. Therefore your element is referencing the Viewport who's height attribute is automatically set to auto. Set your HTML and Body elements height attribute to 100%.
html,body{
height:100%;
}
I am trying to create a navigation element (nav) that spans the full width of the page, but when the windows shrinks enough where the text overflows, the text wraps. As this is the navigation bar for the page, I'd prefer it didn't wrap and the page just scrolls when the nav's content overflows it. I was thinking giving it a width in pixels instead of just 100% would work, but I don't know how to make it the full width on every screen using pixels. Any idea how to do this? I am using SASS too if that could help with a solution.
Basically, I need a solution that makes a element act as though its width were set to 100%, but it can't wrap the text if there's overflow. The window should scroll if there's overflow.
Put in the css style white-space:nowrap;
If you want a scroll bar in the div, go for overflow:scroll; and set a height of one line, and don't use nowrap.
Full width should be easy: width: 100%
If you want specifics, show us your code.
I think your best bet would be to set a minimum width on your nav element. This way, it will only scale your div to a certain point so it doesn't wrap. The only downside of this is that you need to specify a width, but the upside is it works without any of the div being cut off.
http://jsfiddle.net/piedoom/Km4Xa/1/
You can see in my CSS I have the following:
div
{
width: 100%;
background: red;
min-width: 250px;
}
The min width specifies how small the div can get before it just stays at that value instead of taking the window as it's width.
You can also apply this to the body so it works on all elements.
I'm developing something in asp.net and finally got round to creating the UI. I made a basic <div> element to wrap the content of my body in, and I notice that it auto fills the width to 100%. I create a new .aspx page to test it in, and the same results happen. So I create the following HTML document in notepad, save it as test.html and run it through Chrome, IE and Firefox and all three are returning a strip of 20px high and 100% width with a red background. Here's the code:
<head>
<style type="text/css">
#tester
{
height: 20px;
background-color: Red;
border: 1px;
}
</style>
</head>
<body>
<div id="tester">
</div>
</body>
Would anyone know what I could have done to make this so that it auto fills div elements to width: 100% on all browsers? I guess it's possible that I'm being absent minded and forgot that div elements did this automatically, but I'm 99% sure they didn't.
Thank you kindly,
Ben
From CSS 101 (BSD/MIT licences):
The horizontal position and size of a non-floating, block-level element is determined by seven properties:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
The sum of these seven properties is always equal to the 'width' of the parent element.
So yes, you've been absent-minded! Block-level elements (such as div) automatically fill the width of their parent unless they've been told not to by float.
<div>s are block-level elements, meaning they will automatically fill the horizontal space of their parent. Unlike inline elements such as <span>, which only take up the space required by their content.
DIVS are by default 100% of their parent element. So just set the width you need.
Also note that DIVs that have a width greater than their parent will by default also be completely visible unless you set the parent element to overflow:hidden.
Pertaining to html, how do I make a div container grow with the content instead of manually defining a width and height.
<div id="container">
<div id="logo">
<img src="someimage.png"/>
</div>
</div>
No matter what the dimensions of logo are, container does not grow with it. :(
How would I fix this, or can it be fixed?
If you don't define width and/or height, the div element grows along with its content. Unless his content is set to absolute! If the content is set to float, you have to set to the container
overflow:hidden
in order to let it grow!
The default behaviour for divs is to fill the entire available width. A few ways to override this:
set display: inline-block (not IE-friendly)
float it (with the side effect of, well, floating it)
set display: inline (but that's almost never what you want)
set position: absolute
hard-code a width (no dynamic width though)
As a last resort, consider javascript.
Use the magical css property called "flex", it is really amazing
yourDiv{
display:flex;
}
Just make sure that the children are not position: absolute because this will not work with flex.
You can specify min-width and min-height and DIV will adjust width / height as the content changes (of course, not below min width/height).
Working code pen example
Most important css properties from the code (DIV is editable, so just type in text and it will grow with it by width / height):
min-height: 200px;
min-width: 100px;
If you used float it prevents <div> to grow up with content so you can use clear after float and it will work.
<div class="clear-fix"></div>
.clear-fix{
clear: both;
}
I just need a little help with some CSS layout if you don't mind.
I've got three things I'm trying to play around with and I need some help making this work the way I was hoping.
I've got the <body> element of a page, which I'd like to be 100% of the browser window, obviously.
Then I've got two <div> elements which I'd like to stack on top of each other, but the trick is this, I'd like the bottom <div>, (a menu which should really be a fixed height) to determine the height of the top <div>.
Is there a way to lay this out in CSS?
I'm assuming you want the height of the first <div> to have a height of <body> minus second <div>.
If you're using percentages in your layouts, then you can make one have a height of 90% and the other 10%.
But if you're using pixel sizes, you'll need to use javascript. There's no way to determine height by subtraction in CSS 2. You can use offsetHeight to get the pixel height of an element and style.height to set the height of the other.
If you want the bottom <div> to be fixed to the bottom of the viewport all the time regardless of the height of the top <div>, then set its position to fixed. E.g.
#menu {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
}
Else if you want to expand the top <div> to the bottom of the page if its content is smaller than the total height of the viewport, i.e. the "sticky footer" technique, then have a look here or here.