im new to css
i have a bunch of divs that are to all be floating to the left so that they are next to each other and go off the page to the right but the problem is when there are too many divs it does not put in a horizontal scrollbar (which is what i want) instead it wraps the divs,
i could put a larger div around them all and specify the width to be a couple of thousand pixels but i would prefer a simpler method if there is one,
also what is the css style attribute that determines vertical alignment of text inside the divs (like vallign);
any help much appreciatedi really need a response soon so please offer me your adviceSee if one of these solutions works for you:
<p>Solution 1</p>
<div style="width:80%;border:1px solid blue;">
<div style="float:left; width:33%;">data</div>
<div style="float:left; width:33%;">data</div>
<div style="float:left;">data</div>
<div style="clear:both;"></div>
</div>
<p>Solution 2</p>
<div style="width:80%; height:100%;">
<div style="position:absolute; width:300px; border:1px solid red;">data</div>
<div style="position:absolute; margin-left:300px; width:300px; border:1px solid red;">data</div>
<div style="position:absolute; margin-left:600px; width:300px; border:1px solid red;">data</div>
</div>
There is no css style attribute for vertical alignment.
See center align (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/centering.html">http://www.quirksmode.org/css/centering.html</a><!-- m -->), particularly the inset box comments.that doesnt raally solve my problem
I would like to have all the css outsite the document in an external file so i cant specify 300px then 600px etc, i dont want to have measurements of where the divs go i want them to just floatbenjamin, I think we're kindred spirits here - Can't see the forest because the trees get in the way
Move all the style declarations inside the style="" attributes and place them in an external CSS file. Attach each style declaration to a class name, then use the class name in the DIV tags. I'll work off one of Fang's examples above:
<p>Solution 1</p>
<div class="floatContainer">
<div class="float33">data</div>
<div class="float33">data</div>
<div class="float">data</div>
<div class="spacer"></div>
</div>
In your external CSS file:
.floatContainer {
width:80%;
border:1px solid blue;
}
.float33, .float {
float:left;
width:33%;
}
.float { width: auto; }
.spacer { clear: both; }
i have a bunch of divs that are to all be floating to the left so that they are next to each other and go off the page to the right but the problem is when there are too many divs it does not put in a horizontal scrollbar (which is what i want) instead it wraps the divs,
i could put a larger div around them all and specify the width to be a couple of thousand pixels but i would prefer a simpler method if there is one,
also what is the css style attribute that determines vertical alignment of text inside the divs (like vallign);
any help much appreciatedi really need a response soon so please offer me your adviceSee if one of these solutions works for you:
<p>Solution 1</p>
<div style="width:80%;border:1px solid blue;">
<div style="float:left; width:33%;">data</div>
<div style="float:left; width:33%;">data</div>
<div style="float:left;">data</div>
<div style="clear:both;"></div>
</div>
<p>Solution 2</p>
<div style="width:80%; height:100%;">
<div style="position:absolute; width:300px; border:1px solid red;">data</div>
<div style="position:absolute; margin-left:300px; width:300px; border:1px solid red;">data</div>
<div style="position:absolute; margin-left:600px; width:300px; border:1px solid red;">data</div>
</div>
There is no css style attribute for vertical alignment.
See center align (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/centering.html">http://www.quirksmode.org/css/centering.html</a><!-- m -->), particularly the inset box comments.that doesnt raally solve my problem
I would like to have all the css outsite the document in an external file so i cant specify 300px then 600px etc, i dont want to have measurements of where the divs go i want them to just floatbenjamin, I think we're kindred spirits here - Can't see the forest because the trees get in the way
Move all the style declarations inside the style="" attributes and place them in an external CSS file. Attach each style declaration to a class name, then use the class name in the DIV tags. I'll work off one of Fang's examples above:
<p>Solution 1</p>
<div class="floatContainer">
<div class="float33">data</div>
<div class="float33">data</div>
<div class="float">data</div>
<div class="spacer"></div>
</div>
In your external CSS file:
.floatContainer {
width:80%;
border:1px solid blue;
}
.float33, .float {
float:left;
width:33%;
}
.float { width: auto; }
.spacer { clear: both; }