I'm trying to make a 2 columns layout in CSS, with the property display: table;, but there is an image on the top of the second columns, and the content of the columns is limited in height, so the extra-content from the first column goes on the second column.
Here is an illustration of what I'm trying to do:
Here is some text in IMAGE
the first column, and
I want that text to go everything is displayed
on the second column, with the help of CSS.
under the image. And
I know it can be done with display: grid, or display: flex, or even float, but these are not an option... (nor Javascript) :(
I've made several searches but nothing led to the proper result.
Thank you for your help!
Related
I can't ever seem to get this to work, I have a simple bootstrap page with an image gallery that has images of different heights. I am trying to use the nth-child to clear the left side after every fourth .col-md-3
Bootply smippet - http://www.bootply.com/7BhYr6J8rH
The content of the finished page is going to be dynamically populated from a database, so I need this flexibility to work. Can anybody point out where I'm going wrong?
Hard to explain but you are using nth-child on the image. Because there is no image list it will never reach a 4th image, each column has 1 image and no more. However, a row does contain a list of columns so I edited your code to clear by column like so http://www.bootply.com/7BhYr6J8rH:
.row .col-md-3:nth-child(5n) {
clear:left;
}
Another idea, what you could do is add <div class="clearfix"></div> after each fourth column for the same result and cleaner code.
Still learning CSS so pardon if this is obvious -
I am building a header that will contain four sections:
|Header-------------------------------|
|----Title----|----NavigationLinks----|
|----Taglines-|----SelectionBar-------|
|-------------------------------------|
What I would like is for the Taglines section to automatically set the width of the first column (it's content is longer than the title) and then the second column extends to the end of the header section. I can't figure out how to get the columns to match each other without setting specific widths - is it possible to do this without fixed-width areas?
I've been able to come close to what I need using display: table-cell; but can't figure out how to 'connect' the second row to the first.
UPDATE:
Missing a tag caused the div's to ignore the display: table* settings. Using display: table/table-row/table-cell to create a table layout would do what I needed: table-cell will auto stretch the column affecting the width of the rows above it.
Not sure if this is kind of what you're looking for. Question seemed a bit unclear.
http://jsfiddle.net/KacPY/1/
Instead of using outdated tables I would consider notating your widths in percent in order to have a fluid layout.
http://jsfiddle.net/kJRQE/
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.
http://jsfiddle.net/ADLrh/
Hopefully you can see what I'm after. The three 'fillers' on the top row have sunk, upsetting the pyramid-like formation. Any idea what's causing this?
EDIT: I should also add that the method I go for needs to be flexible because potentially any filler could be a like button and the actual pyramid is quite a lot bigger.
Indeed, like Guy suggested, you're going to want to use the float property rather than display: inline-block, because inline-block is pretty finicky for vertical alignment when using different types of elements next to each other, with whitespace between them.
However, to keep the "pyramid" form, you'll want to wrap the buttons in another div that IS set to display: inline-block, to allow the whole row to center in the current parent div.
Like in this example: http://jsfiddle.net/syd8L/
Remove the white spaces between the HTML elements. This is not however the case where you should use display: inline-block;. Analyze this example. You could use float instead, then you wouldn't need to worry about whitespaces between HTML elements.
Easiest way would be to add some relative positioning to the buttons on the first row, like this:
http://jsfiddle.net/ADLrh/1/
Where you have display: inline-block, you should also add vertical-align: top.
See: http://jsfiddle.net/thirtydot/ADLrh/2/
Here I am getting trouble with last column. I want last column bg-color and borders up-to vertical scroll bar. And header text is overlapping.
Here is the link : http://jsfiddle.net/8JvZQ/
Floating header
Added width: 100%; to .tableScrollBar table {}:
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/3/
Note: This is the straight-up solution to your problem. However, if you simply wish the effect of the table header always being visible. Then you can use jQuery to make the full floatable on scroll. Here is a demo of the floating header and from here you can download it.
Last row (CSS)
This is css version of detecting the last row. However, it is not crossbrowser, since IE does recotnize :first-child but not :last-child :(
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/4/
Last row (jQuery)
This is the jQuery version for detecting the last row. This is the ultimate solution!
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/9/
Not full-width version
This is being done by adding display: inline-block; to the global container.
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/10/
Last column being full-width (just like your screenshot)
Being done by adding class="w100pre" to phone column and also creating a new class:
.w100pre {width: 100%;} that can be used globally on your site :)
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/11/
NOTE: I wasted about 2 hours on this question.
here exactly like ur screenshot fixed the text overlaping. http://jsfiddle.net/8JvZQ/14/
hiding the row for fixing the overlapping text.