CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-2
Abraxas
Abraxas

Reputation: 361

Bootstrap extend span columns to same height

I have a row with an embedded object (span9) and an embedded iframe (span3)

The video I have managed to get to respond to various screen sizes, the iframe, however, stays a fixed size and doesn't even match the height of the embedded object beside it.

Here is the code I have so far:

  <div class="row-fluid">
<!--Video-->
<div class="span9">
   <div class="flex-video widescreen">
     <object type="application/x-shockwave-flash" height="100%" width="100%" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=theabraxas" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=theabraxas&auto_play=true&start_volume=25" /></object>


   </div>
</div> 
<!--Chat-->

Here is the 'flex-video' css:

    .flex-video { position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

(EDIT 8/12-After looking more I see that JSFiddle seems to be used a lot for these types of issues, here's what I have for the row: http://jsfiddle.net/D2RLR/6619/ Any advice would be tremendously appreciated)

I'm not much of a web/design person (let alone coder of _anything) so I won't copy in some of the other CSS, etc I've tried, but any advice would be greatly appreciated.

Thank you!

Edit: a live version of this, so you can see what I'm talking about, can be found at my test site here: http://theabraxas.us

Upvotes: 1

Views: 420

Answers (1)

Pred
Pred

Reputation: 686

Without knowing exactly what you are looking for, I have a couple of things you might try:

  1. Delete the parent's (<div class="flex-video">) overflow: hidden style, or change it to overflow: visible. This will prevent the parent from hiding the extra content. You can then change the iframe's height to whatever you deem appropriate.

  2. Delete the parent's height: 0 style and delete the iframe's position: absolute style. Again, you can then change the iframe's height to whatever you want.

  3. Change the parent's height to the same value as the iframe's height.

Any of these should work but they all require access to the parent element, so I hope you control that :)

Upvotes: 1

Related Questions