Jump to content



Photo

[CSS] Can this multicolumn thingy be achieved with CSS only?

css responsive multicolumn fluid layout

  • Please log in to reply
4 replies to this topic

#1 team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 29 January 2013 - 22:50

Hey guys,

I'm trying to achieve the below while still retaining it's fluid/flexible/responsive layout.

css.jpg

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:

p.thisIsAnExample {
	 display: block;
	 max-height: 320px;
	 font-size: 42px;
}

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 -->

.fpBlockItem {
max-height: 280px;
background: #2c2f31;
}

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


#2 OP team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 30 January 2013 - 04:02

Sorry, but editing has lapsed.


I created a jsfiddle:

http://jsfiddle.net/teamNOOB/7kLJy/

#3 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 30 January 2013 - 06:10

quite easily. probably the most straight forward and least hacky is display:table-cell

#4 OP team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 30 January 2013 - 08:35

quite easily. probably the most straight forward and least hacky is display:table-cell


Hey mate yeah we've already gone through that option. Unfortunately stupid Twitter Bootstrap is having conflicts.

Responses here: http://www.sitepoint...d-with-CSS-only

#5 palenous

palenous

    Neowinian

  • Joined: 19-January 13
  • Location: Ohio, United States
  • OS: Windows 7 Ultimate
  • Phone: Samsung Galaxy SIII (Verizon)

Posted 31 January 2013 - 15:03

I can't seem to load your jsFiddle link. Can you post a new one?

Nevermind...it seems their site is down...