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.
Related
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.
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 remember asking this question a while back but i can't seem to find it again! I've searched but i can't seem to find the solution i'm looking for.
Let's say i have two divs with 100% width floated next to each other. As they take up the entire screenwidth, there is no longer any space left for them to float on, and therefore the second div appear below the first one. What i want is to make the second div continue floating off screen next to the first one.
I think the solution i got was to set the display property to something else, but i'm not entirely sure.
Any suggestions?
I believe you would have to have a container and set the container width to 200%. The two inside divs with 50% width will fit inside.
#container_div{ width:200%}
.inner_div {width:50%}
You could position them absolutely.
<body style="padding:0; margin:0">
<div style="width:100%; position:relative;">
<div style="width:100%; height:100px; background:#f90; position:absolute; top:0; left:0;">COLUMN1</div>
<div style="width:100%; height:100px; background:#f00; position:absolute; top:0; left:100%;">COLUMN2</div>
</div>
</body>
They are positioned absolutely within the bound of the relatively positioned parent.
Then you switch between them you just switch the left values, from 0 to 100% respectively.
heights and background colours are just to see whats going on :)
give 50% width to both div
so they occupy 100% width together
I have a centered div on my site, using a fixed width and margin:0 auto;
All looks fine in IE, but on FF, for the pages with long content, only the top part of the div has the proper div color, and the rest has the body background color.
what I'm doing wrong?
many thx
Without seeing your code it's hard to tell, but my bet is that you've set the div height to %100, which means 100% of the viewport.
It will not stretch beyond that, even if the content is long enough. This is the correct behaviour.
To make it the full scree height when there's not enough content, and go beyond the viewport height when there's more than enough content, you'll need to use two divs.
Here's an example I've hosted:
Div height 100% fix
If you know the width (i.e:600px) and height of the div you can use the following.
I center divs in one direction using 3 parameters:
Horizontal:
<div class='hcnt'>Some H Centered Text</div>
CSS:
.hcnt{
left-margin:50%;
width:600px;
left:-300px;
}
Vertical:
<div class='vcnt'>Some V Centered Text</div>
CSS:
.vcnt{
top-margin:50%;
height:400px;
top:-200px;
}
Both:
<div class='hcnt vcnt'>Some completely Centered Text</div>
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