I'm finding a large amount of conflicting information regarding this layout. Some sources say use a table, others use a div.
http://www.bootply.com/mDIcRVOq8J
Basically, a square on both ends and two stacked rectangles between them.
I have most of what I want but I cannot figure out the inner div positioning as noted in Bootply.
What I Have:
What I am trying to achieve:
Solution:
http://www.bootply.com/o3m5A8BKJK
If I'm understanding what you need, add vertical-align:top to the doc-tile-content, remove display: table-row from the .row class, and add display:block to the inner content divs.
Related
I have a minor CSS issue. This is the website. As you can see, the div at the bottom overflows. How do I fix it? I suppose it's just a CSS rule I have to add/change. Thanks
Apply:
overflow:hidden;
to site_content_large_div
...or, if you want the div to grow with its contents, and for its container to work properly, then remove the height value applied to site_content_container_div, and apply a clearfix to the same, so that it's enclosed, floated elements will contribute to its calculated height.
Clearfix solves a common problem with float-based layouts, so it's best to create a separate, reusable class for this fix that you can apply to any element containing floats that need to be entirely visually contained.
This article provides all the necessary code: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
I am attempting to implement the following layout without using javascript and without using tables:
There are a LOT of rows on a page. Each row is filled by four content elements, the tallest of which determines the height of the row. Each content element has two other elements, in this case, an image and a caption. The image is aligned to the top of the row while the caption is aligned to the bottom.
In the HTML structure, the image and caption must stay together in the content element.
Some solutions I've tried:
Splitting each row into two: a row of images and a row of captions, separates the images from the captions.
Using the famous equal height column div structure results in an ugly absolutely-positioned Matryoshka Doll arrangement of divs.
The issue with tables is that the page will be made MUCH more dynamic in the future (rearrangable content, fluid layout, dynamic searching, content of varying width), and tables will be extremely annoying to do this with.
If I'm imagining your markup correctly, perhaps this will work for you:
http://jsfiddle.net/Puppies4Life/Fd94X/1/
I absolutely positioned the .caption to the bottom of .row. I made it a point to position .caption to .row instead of the immediate parent .content because of the varying heights of .content. The image remains in the flow of the document. I Added some additional padding to the bottom of .row to account for the text and put in a simple clear fix (I suggest using a better option in your production code)
Hope this helps solve your problem or possibly ignites an idea or two!
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
This is what I have:
and this is what I want:
I have a container div around all of the smaller divs, and the smaller divs are floated left. How can I get them to align in perfect rows like the bottom image? This would be easy but the catch is I don't want to use a container div for each row since I want the number of images per row to be fluid (container width is variable). Is this even possible without JS hacks?
You could just change the float:left to display:inline-block. That will lay the images out in rows, just like text layout, which sounds like what you want to do.
I post this with some apprehension because I don't know what you qualify as a Javascript hack... There is a plug-in that would work well for this, Masonry JS. But if you consider a plug-in a hack then I would suggest applying a display:inline-block; to the elements that you want in a line and removing the float:left; property.
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?