https://i.stack.imgur.com/FZyiq.jpg I've designed this layout and it works fine in my mind, but when i try to make this with CSS things get a little strange.
I have a div with 960px of width and this div is the main content wrapper. I want this gallery div to ignore the width and have 100% of the browser resolution (or another width). Any idea how to do this?
<div id="conteudo" >
<div class="exploded-wrapper" id="your_post_here_<?php the_ID(); ?>">
<div class="exploded" id="your_post_here_<?php the_ID(); ?>">
<a href="javascript:jQuery('.exploded-wrapper').hide();jQuery('.exploded').hide();" class="close"></a>
<div class="detalhes">
<div class="desc_wrapper">
<div class="desc">
<h2>
<?php the_title(); ?>
</h2>
<?php echo the_excerpt(); ?>
<div class="desc_pag">
<!--a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a-->
</div>
</div>
</div>
<div class="galeria">
<?php the_content('Read the rest of this entry »'); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
// Using default configuration
//$("#galeria").carouFredSel();
// Using custom configuration
jQuery("#galeria").carouFredSel({
//items : 2,
circular : true,
direction : "left",
infinite : true,
scroll : {
items : 1,
easing : "swing",
pauseOnHover : true,
mousewheel : true
}
});
});
</script>
</div>
</div>
</div>
</div>
</div>
for the CSS please use firebug and inspect http://ccrdesign.com/portifolio/
One, you can use javascript/jquery to manually set the width of the expanded div to the page width, but this is very hackish and I wouldn't recommend it.
What I WOULD recommend is that you reconsider your html structure. Instead of using one content wrapper at 960px width, have your wrapper be 100% width with alternating rows of photos and "empty" 100% divs that you can easily expand. So, abstracted:
Your javascript can append a div under the clicked div and set the style to whatever you want, and since the parent div will be 100% width, you can achieve the effect you want. These will stack nicely : ).