I have a web page that contains a few <section>s that should be laid out horizontally. All are 85% of the screen width, with an automatic margin both sides. The problem is that the sections seem to ignore float:left for some reason.
I also don't want to set a fixed width on the body, as the same CSS will be used on many pages. Is there a way that this can be done?
Here's a jsbin of the code. I also tried this with display:box.
What you can do is to use JS to "resize" a container. here's a short example:
<div id="container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
what you do is float:left all the sections (additionally add overflow:hidden;zoom:1 for the container for wrapping). pretty easy. however, they are constrained by the width of the container (or if it's directly the children of the body, they are constrained by the html body).
from here, you use JS to do the trick. I prefer jQuery (but people may criticize for not using pure JS so i will only describe the procedure). What you do is to get the "outer width" of the sections (that is the width, including padding, border AND margins), multiply by how many sections you have, and then apply this to the direct parent/container (or whatever parent that is constraining your horizontal items).
The effect is that the parent of your sections will have an explicit width, that will force the browser to make it fit, thus be scrollable horizontally. also, make the container fit the sections as well.
these methods are currently done by JS "sliders" which have a specified width for the the outer container (like 900px) but have an inner container which has like 3 sections (2700px). this, with added overflow:scroll to the outer container makes everything in it "horizontally scrollable"
Related
After a lot of research about floats i am confused why there is so much information on the web that a float should always have a width defined. It is often said, that the float will take the whole space and therefore behave like a normal block element. but with regard to the information here http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float the float will always shrink-to-fit. as i understand the float will never take the whole space unless it needs to.
when thinking about navigation items, is there a need to specify a width? i don't think in this case. maybe when content inside the float is too large?
it was also discussed here Do you really need a width on floated element? but there is no clear statement, that this is not necessary.
I don't think all floated elements require fixed widths, but perhaps any positional CSS that includes dividing your page into 3 columns, you may want to consider fixing the widths on the columns floated to left/right. One reason for this is because navigation bars or forum posts or some sort of list of hyper links is often aligned on the sides of the pages, and if these 2 columns are not fixed, the character limit of your anchor links will be limited as the screen size decreases. You may not want your inline anchor tags wrapping across multiple lines when the screen shrinks. Fixed Widths would eliminate this.
Floats dont need a width. The advantage and disadvantage as well is a collapsing container, if there is no content in it.
Have a look at: Expand div to max width when float:left is set
Deleting all p-tags in the div-tag (class right) shows the effect: no more red background
.content .left{
float:left;
width:100px;
background-color:green;
}
.content .right{
margin-left:100px;
background-color:red;
}
<div class="content">
<div class="left">
<p>Hi # all</p>
</div>
<div class="right">
<!-- no content no backgroundcolor -->
</div>
</div>
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
I need a little bit of help disciplining my HTML. It seems to be acting up.
Anyway, the content area of a page I'm working on has two columns. To get the multi-column look, I'm not using one containing div for each column because some of the "rows" in the column need to be lined up.
So instead, I'm basically using several "rows" with two inline divs per row -- one for left content, one for right. Most of them are working correctly..but for some reason, my last row isn't. No matter what, it will not listen to me when I give it a width.
Here's what the relevent HTML looks like:
<div id="mainContainer">
<div id="topBar"></div> //full width
<div id="featured"> //this "row" is working fine
<div id="featuredVideos"></div> //these two
<div id="featuredLiterature"></div> //are inline
</div>
<div id="browseButtons"> //this is the "row" that is acting up
<div id="litBrowse"></div> //these two
<div id="vidBrowse"></div> //are inline
</div>
</div>
In the mean time, what types of situations can cause a div to not listen to a width? I even went so far as to give every single child div inside litbrowse and vidbrowse1 the same width that they have, 450px, and no dice. All of the content above it, which has essentially the exact same structure, is working fine. The only difference, maybe, is that the "row" above the row in question is comprised of two floating divs.
Here is a jsfiddle showing the issue. The bottom two divs (Browse lit by category, browse vids by category) should be spaced out, but they're scrunching together because they won't take their 450px width.
The problem is that you are saying that .browseBtn is inline. Inline elements don't take widths, only block level elements do.
Using inline-block instead will do what you want. It is inline enough to make the divs side by side and block enough to allow you to specify the width.
See http://jsfiddle.net/abtFr/2/
SECOND EDIT - Others have responded saying to use display: inline-block instead of display: inline. inline-block is not compatible with IE7. HOWEVER, we can make it compatible by appending
zoom:1;
*display: inline;
to the element using inline-block. To make compatible with IE6, you need to specify a height, so add
_height: [yourheight]px;
The underscore will target IE6 only.
Alternatively you can float the elements left, in which case my original reply may be relevant.
EDIT - I responded without seeing the jsFiddle; this response can probably be largely ignored.
To answer your question, floating an element will cause it to be taken out of the normal layout. If a div is floated left inside another div, it will be placed to the far left of that container, but its dimensions will not be taken into account when sizing that container div; in other words, that container will act like there are no divs inside.
To fix this you need to place another (empty) div inside the container, after the floating divs, and assign the style "clear: both" to it so that it will take the floating divs into account when being positioned. In turn, the container div will see the last cleared div and resize to take it into account.
Alternatively, sometimes you can skip adding the cleared div inside the container, and just add the style "overflow: hidden" to the container itself. This is somewhat of a hack, but a pretty robust one as far as hacks go.
Hope this solves your problem; if not we'll have to wait for more information.
It's simple, yes, you have a div, but you define its display as inline (with .browseBtn definition). So it's not a block-element anymore and it doesn't listen to width definition.
I've corrected the fiddle, although it might have other side effect.
I have a web page with the following content..
<div id="container">
<div id="header"></div>
<div id="lsidebar">
</div>
<div id="content">
</div>
<div id="rsidebar">
</div>
</div>
i need a container to be centered always on the screen.
the container width would be the half of the screen.i use margin-left for centering the container.But it is different for different browser.
Another problem:i am adding float:left for lbar,content,rbar.but the rbar is moving to next line like this...
Here is my css
#container
{
position:absolute;
width:75%;
left:15%;
}
#header{width:100%;height:430px;}
#content{position:relative;top:0px;width:60%;}
#rsidebar{border:2px solid black;width:100px;height:200px;float:left;}
#footer{position:relative;top:10px;width:100%;}
how to solve this issue...
the container width would be the half of the screen.i use margin-left for centering the container.
Sorry?
If the container is half of the screen, you'll have a width:50%. If you want to center it, you'll have margin:0 auto;.
There are only two appropriate techniques to center items on a page: text-align:center; for content, margin:0 auto; for blocks. You may be tempted to do something like margin-left:25%;width:50%;, but it will probably not give the expected results in all browsers and cause too many problems, so try to stick with the techniques that everybody uses for years, unless you can prove that your technique is much better.
Another problem:i am adding float:left for lbar,content,rbar.but the rbar is moving to next line
Probably the outer width of three panels is bigger than the width of the container. Note that we're talking about the outer width, not the width itself. For example if the container element is 1067 pixels width and contains two panels of 200 pixels and one panel of 600 pixels, with 50 pixels margin between, the actual width of three panels will be 200×2 + 600 = 1000, but the outer width will be 1000 + 50×2 = 1100, i.e. greater than 1067 pixels.
To avoid problems with the widths of the panels, especially in the case where your container has a variable width depending on the size of the window, you can float-left the left panel, float-right the right one and keep the central panel to fill the remaining space. This may not always be possible depending on your layout and design. If this is a case, it would be great to see the actual source code in your question to be able to give a more specific answer.
Seing your source code, I don't understand why are you using position:absolute and position:relative for nearly every element. What's the point?
1. Aligning the container
To align the container, you have to specify not only the width, but also the margins.
div#container{margin:0 auto;width:50%;}
2. Float-lefting the panels
Now that you have your container filling the half of the space and centered, let's position the panels.
Your right panel has a width of 100 pixels. I suppose that your left panel has the same width.
div#lbar,
div#rbar{width:100px;}
Let's float-left and float-right them:
div#lbar,
div#rbar{width:100px;float:left;} /* Apply this style to both side panels */
div#rbar{float:right;} /* Override the float:left of the preceding line */
Now, we want the central panel to avoid filling the space already filled by two other panels:
div#content{margin:0 100px;}
That's pretty all you need to do.
I may also suggest you to read some books about HTML/CSS. Looking at your code, I might suppose that you're not very familiar with it, and that some reading may improve both your understanding of both languages and your skills.
first: give the container a width and
margin-left auto; margin-right:auto;
do you use a meyerweb reset stylesheet?
The combined width of you lbar + content + rbar + margins+ padding is probably more than the space in your container; therefore your rbar moves to the bottom.
ALso use the container solution of Daniel
You can use margin: auto to center container horizontally. About sidebars you probably want lbar, rbar, content in markup and float: left, float: right for lbar and rbar respectively. Remember to put clear: both on footer just in case.
You can also use HTML5 or something like http://lessframework.com to specify conditions for different screen sizes.
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.