- 0
[CSS] Can this multicolumn thingy be achieved with CSS only?
-
Recently Browsing 0 members
- No registered users viewing this page.
-
Similar Content
-
- 0 replies
- 5 views
-
The official Microsoft Loop Twitter page has a teaser: "Something is coming"
By John Callaham,
- microsoft
- microsoft loop
- (and 4 more)
- 6 replies
- 4 views
-
Google Chrome 108 is coming today with lots of deprecations and improved COLRv1 support
By Usama Jawad96,
- google chrome
- (and 6 more)
- 1 reply
- 5 views
-
Get this Price Dropped Coding 101 Bootcamp Beginners Bundle for only $24.99
By News Staff,
- zenva academy
- coding 101
- (and 11 more)
- 1 reply
- 6 views
-
- 0 answers
- 3,055 views
-
Question
team_NOOB
Hey guys,
I'm trying to achieve the below while still retaining it's fluid/flexible/responsive layout.
So basically I have a 3 column section where the two images on the right are loaded with no set width and height and the div on the left is a p tag that i want to expand to match the height of the images.
Something like:
OK so the the plugin im using for the responsive images is imgLiquidFill. It takes no initial set width and height, instead taking my max-height and applying the it's picture fill techniques accordingly.
Here is the HTML and CSS for the area in question:
<div class="row">
<div class="span4 fpBlockItem"><p>Some big callout text goes here!</p></div>
<div class="span4 imgLiquidFill fpBlockItem">
<img src="img/dummy-images/01.jpg" alt="01">
</div>
<div class="span4 imgLiquidFill fpBlockItem">
<img src="img/dummy-images/04.jpg" alt="03">
</div>
</div><!-- end row -->
[/CODE]
.fpBlockItem {
max-height: 280px;
background: #2c2f31;
}
[/CODE]
Any help would be greatly appreciated.
If it can't be done - I guess I will use a multicolumn jquery plugin - but trying to avoid that.
Thanks,
Ben
Link to comment
Share on other sites
4 answers to this question
Recommended Posts