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!
Related
There are techniques to make section divider. For example I want to divide two divs.
I can cut shapes from the first div and second div and pull the second div's element closer to first div with negative margin.
I have learned some techniques from freecodecamp article.
I can place a new svg element on the first div by converting it into data:svg using this website and somehow it will do the work. But I don't understand how it works exactly I am not getting the negative margin.
Now my other question is —
How is it possible to have content in the divider which is present in the first div ?
Below are some images for better understanding
In the above image I have showed the divider (red color border) and inside the divider there is content present in the second div. I don't fully understand how this technique works and there is no div with its own elements.
I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
I have a two column layout, The left hand column is flexible in size, but the right hand column has a fixed width. When you resize the browser, the left hand column shrinks to allow the right hand one always to fit.
At a set size however, when the left column reaches a min width (as dictated by the overall width of the window), we need to stack the columns using a media query, so that they can be unfloated and fill the space available to them.
The problem is that when this happens, the right hand column appears above the left column due to the way the markup has to be written. I need the right hand column (containing less important info) to be below the left hand column on smaller screens.
Is it possible to have the right column naturally fall below the left one? Either by achieving the size effect having it further along in the markup, or through some pure CSS solution?
I don't want to have to resort to javascript to change the element order, and if possible I don't really want to have to have duplicate divs with the same content to hide/unhide, however I understand if that's the only viable solution.
There's a demo fiddle here: http://jsfiddle.net/jmxu2/
<div class='column-contain'>
<div class='c-right'>
The right floated div is secondary content, but fixed width. It should drop below the primary content when there isn't enough room.
</div>
<div class='c-left'>
This left div is primary content, but non fixed in size. When there isn't enough room to nicely display side by side, this div should be on top.
</div>
</div>
The right column will appear on top because it is first in the HTML. If its not possible to reorder the elements in HTML try adding the following to your media query:
.c-left {display: table-header-group; }
.c-right {display: table-footer-group; }
This will place each elements with those classes in a pseudo table and reorder them in the flow accordingly. The elements displayed as headers appear above those displayed as a footer.
While using Twitter Bootstrap, should I nest a row div within a container div and put all my span divs within the nested row? Is that the best practice?
What if I put span divs directly within my row div and do not enclose the row div within a container div?
What if I put span divs directly within my container div, without using the row div at all?
All I know is that a container is 940px and a row is 960px. However, I have seen examples where a row div has been put within a container div. Is that going to help or will it make the display messy?
Please explain me the best methods to follow and under what circumstances.
In general you would use container > row > span
I can't think of an example where the the other 2 options you ask about would break anything, but they may not give you the results you want.
Wrapping everything in the conatiner div will manage the width of the page and side padding. Using the row div will ensure that your spans are layed out the way you want. For example imagine 2 rows that each have just have a single span4. If you don't use the row div the 2 span4s will float one next to the other instead of being stacked vertically.
There are many cases where you will have nested containers in a Bootstrap layout, the first one you will likely come across is in the nav bar, and once you start using fluid Bootstrap layouts you will see that container divs are not always 940px, but if you stick to the container > row > span arrangement it will save you some grief, especially if you are just starting.
Good luck!
You should have row inside a container, since using the container will ensure that the container is evenly centered across the entire page with even margins since container has margin-left:auto;margin-right:auto; in the CSS.
Use row when you want spanX's to appear on the same line.
spanX's that are not inside row will wrap.
Here's a demo that will show you the differences
A row is designed to go inside of a container.
A span is designed to go inside of a row.
Rendering could get unpredictable if you go with any other combination besides container > row > span .
Ultimately if your code works, then you're doing okay. There is no reason to get locked into what other people have done. BUT if you change it up, make sure it's for a good reason, and that you comment the code everywhere to explain your thought process.
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.