I'm building a HTML template for my site and would like to have a main content pane on the left and a navigation pane on the right (similar to Twitter).
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom. I've played around with float:left and float:right but those cause the parent div to not expand appropriately vertically.
I've seen references to using tables (seems like a step backwards) and SPANs (which I haven't been able to use to produce the right effect).
What is the best practice for accomplishing side-by-side panes in HTML?
Any advice or examples would be greatly appreciated.
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom.
Why would you assume that when the example you gave, Twitter, uses them?
The parent div can be made to expand to the height of the larger of the two columns by putting a div below the two columns within the container div with clear: both as its CSS.
DIVs with float is probably your best bet. What is your problem with the height? Have you tried doing height: auto for the div?
Related
How can I put the height of side by side DIVs?
When I change the width of browser, sometimes the left div get higher or shorter than the left.
I want that automatically the left or the right div grows up to became with the same height of the other one.
Setting a display table-row is the best solution for this?
Take a look at the image of the page I want to develop.
http://i.imgur.com/BhvV2.png
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table.
Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
Here's a solution, also found on SO
http://jsfiddle.net/kaAjW/
Here is the link to original post
How do I keep two divs that are side by side the same height?
The technique is called Faux Columns and here is an article about it
http://www.alistapart.com/articles/fauxcolumns/
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/
I think you won't be able to do that without using a html table.
I am attempting to set-up my homepage with three columns (each could be different heights depending upon the content) and for some reason the columns within my 'content' div do not respect it. This causes the columns to overflow onto the information below. I have tried to create the same layout using positioning since i understand its the better way of doing things; however i've had no luck.
I tried to use the 'overflow' element which does take the columns into consideration but it then puts a scroll bar on the content element.
Please see an example of my work here
Why does it does this? (edit) - Understood
How do i get it so the columns sit inside the
content element and respect the flow of the document? (edit) - resolved
Could you advise a better way of doing this maybe using positioning? Is the method I'm using the best way of positioning, or should i be using relative, static, etc?
Content will overflow its bounding box unless you use overflow: hidden (or similar) in some cases; see overflow and clipping in the CSS2 spec
Since you are floating your three columns, you need to use something like Clearfix so that content that comes after the columns' container will clear past them. (Alternatively, you could set clear: both on the <p> containing the footer content.)
Floating is the common way of approaching multiple columns, so you're headed in the right direction. Positioning almost certainly won't help you here.
Try adding overflow:hidden to your content div and removing the height restriction, like below:
#content
{
background-color:Blue;
width:800px;
overflow:hidden;
You are floating those columns, and you don't clear the float so what is happenings is that those 3 divs are "floating" above everything else, so the browser doesn't include them in the main html. You must clear the float with the CSS clear value.
See the jsFiddle here
Also check out this tutorial
I have a main content region in the center of my page which is 660px wide. I want to separate it into two 330px-wide divs. What's the best way to go about this? Should I be using px? Do you have any place that I can read more about a good approach or two?
put two divs inside of your center div, float one to the left and one to the right. Clear your floats (http://www.quirksmode.org/css/clearing.html) by adding 'overflow:hidden' to the container.
This will effectively split your column into two. You can specific the dimensions of the interior divs in px, or %, whichever you prefer.
Here is a working example: http://tinkerbin.com/MGjJBDS4
First the example: http://jsfiddle.net/5S3mk/3/
I have a table whose columns need to be sortable so in the table header there should be links for sorting. The columns themselves are dynamic and their width is not known in advance.
In order to center the header content horizontally I used the recipe from here.
Now I'm having trouble with adjusting the spans inside container div to center vertically. Does anyone have any idea how to do this (legacy browser are not an issue)?
Here you have one way of doing it. It uses a little jQuery script, but it is really simple.
Basically I have a parent div with height and width and overflow:hidden and then within that some more divs with it.
We are dealing with fluid content and some of the divs go over the corners so get hidden.
But one is half and half.
Is there a way to make that completely hidden?
CSS would be best.
I don't think you can know if a child from an overflow:hidden parent is in the hidden or visible section without using Javascript (I might be wrong here).
What I suggest is that you set all the child divs to a fixed dimension d and set the parent div to a multiple of d so every child is either completely visible of not.
This solution won't work if you fill your divs with different-length content
If I understand your post, you have a wrapping div that has overflow:hidden and you want to make any child element hidden unless it can be completely displayed within the wrapping div.
There may be a better way to do it, but I would use a CSS media query. If you're unsure of how they work this is a good place to start:
http://css-tricks.com/resolution-specific-stylesheets/
Using this method, you could determine how many blocks of each type should be displayed on any given set of resolutions. I'd be interested in seeing how it goes, or if you end up using a different approach. Best of luck!