I am trying to make a horizontal scrolling website and I want the divs to float to the right which I can do. But I don't want to have to define the width of the container because it could be different on different pages.
Any Ideas?
Firstly, its generally inadvisable to have a website that requires scrolling side to side. Its an unusual movement (users dont come across it very much) and users tend not to like doing it.
To actually answer your question, the only method other than setting a fixed width onto your container is a percentage width, that way you can set it to be the same size (proportionally) for every user. Alternatively, if you dont want to put on a fixed width at all, just leave it. The container will automatically expand to size of whatever you fill it with.
Your best bet might be to use a javascript library (such as jquery) to check for the widths of columns you have, and set the container to the sum of the widths of the columns.
make a container that holds your divs.It seems to me that you should float all of those divs left.
<div id="container">
<div class="floater_divs">
</div>
<div class="floater_divs">
</div>
</div>
#container { width:100%; other stuff you want etc...}
.floater_divs { float:left; other stuff you want etc...}
If you want the floater divs to have different rules, then just make new classes or id's.
Related
I have this CSS: https://cal-linux.com/styles/tutorial.css
And a sample page that uses it: https://cal-linux.com/tutorials/gswc++.html
When I display this on a smartphone (or when I check it through Google's Mobile friendliness verify service), the layout looks huge (badly cropped, instead of reduced to fit the smartphone's screen.
I only use proportional measures (for example, outsidecontainer's div has width 80%, inside right-most column has min-width 25%). I'm placing Google Ads in there, but it's a "Responsive" add, which is supposed to adapt to the page's available size and layout.
Any tips on this? I figured posting the actual links to the pages might be ideal; but please let me know if a "minimal" instance of code that reproduces the problem would be preferred.
Thanks,
Cal-linux
There are a few things I note here:
You use display:table-row and display:table-cell a bit too much. Those don't respond as well to the resizing especially if you have not specified the width of each item. Instead either use floats with a clear:both on the container's :after pseudo-element or inline-block. Either way you should define percent widths for the containers.
Your css has a lot of white-space:nowrap but doesn't use overflow:auto which forces the element to not resize the content and just stretch its parent container.
Aside from that a few places I see a fixed px width which makes it more difficult to resize. It doesn't seem to be your ads. Although google's script does throw an error about trying to put an ad in an 86px x undefined space. You can set a fixed height or at least a min-height to give the script an idea of how big an ad should be placed there.
The easiest solution is to incorporate bootstrap to do the heavy lifting of setting up a grid for what you want.
You can basically do your two column style like so:
<div class="container-fluid">
<div class="left-col col-md-11">
<!--- ALL YOUR CONTENT HERE //-->
</div>
<div class="right-col col-md-1">
<!---Google Ads go Here //-->
</div>
</div>
If you want to stick with your own style, by using the code inspector in chrome I was able to get to the following result when resized:
I made the tablerow class be a standard display:block
The first column was set to width:75%; display:inline-block;
The second column was set to width:25%; display:inline-block;
The autosize elements changed to display:block;max-width:100%; overflow:auto;width:auto;padding:0
The div.code blocks were changed to display:block;white-space:nowrap;width:auto;
Everything else stays the same pretty much. That should fix it, however you should note that frameworks like bootstrap help out with mobile sites by making the page columns collapse and go one ontop of another for mobile browsers so that they get maximum space.
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
In tables, if you have a row, that row is the same height and all cells in the row grow and shrink with dynamic content. (If one cell has a ton of text and the other cells not much they are all the same height, letting you make columns and rows).
With the popularity of div float layouts using tables is often frowned upon. However how do I duplicate this and other functionality and benefits of a table while still keeping the display set to block for the benefits of a block, cross browser?
I've seen many hacks but they always seem to be too complicated, interfere with each other, or take tweaking. I am looking for a standard reliable method for the following:
Make div boxes the same height across a row with a wrapping container
<style>
.cell { float:left; }
</style>
<div class="row">
<div class="cell">Content 1 with more width</div>
<div class="cell">Content 2<br>with<br>more<br>height<br>Content 2<br>Content 2<br></div>
<div class="cell">Content 3</div>
</div>
In this case all div's of class "cell" will have the same height, and not be fixed height at all and be floated and will stay that way for dynamic content of any size.
Vertically center content
In this case using the example above, all content would be vertically aligned to the middle, for dynamic content of any size.
Make div's of class "cell" share a common width that is based on the wrapper "row"
In a table when you specify width as 100% or fixed width the cells will automatically try to all be the same width, unless an image or block like item prohibits this. How can this be achieved with floating divs? As if you say, float all "cell" to the left, you can specify a min width or a fixed width, but I know of no way to make them share a common width that is dynamic, like a table. In floated divs by themselves they shrink to the size of the content.
How to avoid content pushing against the container/wrapper "row" and treat it as if it were just a block
For whatever reason when a floating div is inside a wrapper you can get odd behavior where content will "stick" to the wrapper as if were floating too. Even sometimes when using a <br style="clear:both"> at the end I had this happen.
If you could answer all these questions about floating divs for me it is most appreciated. Please don't tell me to break this into separate questions as they are all related to the same thing. Please don't tell me this would be better asked somewhere else. If however you wish to be helpful great :)
If the solution is using display:table-cell alone, I've tried this, it makes the divs not behave as a block, shrinking it, the background shrinks to the content too, and in other ways it does not behave as a block. Also some versions of IE do not support this and I am looking for a cross browser solution. Thank you.
If you want your div elements to behave like table cells, you can style them that way:
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 33.33%;
vertical-align: middle;
text-align: center;
}
This does not rely on setting a height or min-height on the .cell elements, so the height will remain flexible.
--- jsFiddle DEMO ---
You may apply the CSS like this;
.row{
height: 200px;
}
.cell{
display:block;
float:left;
height:100%;
}
Here is a working Live Demo.
and Here is a workaround to distribute the columns also.
Hope this helps
Note: DO NOT add percentage attribute to child divs to fill parent div (for example 50% each for 2 child divs, 25% for 4 child divs etc) since these vary according to number of divs and cannot be calculated accurately sometimes
Well, I went the jQuery route...
http://jsfiddle.net/dtgEt/1/
I would like to point out that while yes, some people will just use a table, a table is for displaying tabular data, not layout. A div has no semantic meaning and therefor is a better choice, in my opinion (unless it is actually tabular data that your are publishing to the web).
My solution works in IE 7 and probably would in IE 6. If you want to align your content in the center of the container there are many good ways to do that others have suggested (beat me to it).
If you need the formatting of a table, but you have to support older browsers that don't have support for display:table, then use a table. It's pretty much that simple.
Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.
For instance, a table (or display:table, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.
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.