CSS issue floating divs wrapping

  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

On the head of my webpage. There is one div which is 100% of the wrapper width. Then 3 float left divs inside of the head div. The center one holds an image, and is always the same size. The ones on the right and left of the center are set to percentage width. The three divs together span the entire screen.

I've tried tons of things, and I cannot stop the div on the right from wrapping when the screen is resized smaller. What are some solutions for this?

CSS Code: [ Select ]
body
{
   margin:0;
}
div.wrapper
{
   background-image:url('images/bg.png');
   background-size:100% 100%;
   width:100%;
   min-width:1200px;
   height:1650px;
}
div.logo_left_right
{
   width:39.94%;
   height:204px;
   border-bottom:31px solid #FFF;
   float:left;
}
 
div.logo_middle
{
   width:216px;
   height:238px;
   padding:0 30px 0 25px;
   float:left;
}
div.logo_middle img
{
   width:217px;
   height:206px;
}
div.head
{
   height:235px;
   width:100%;
}
 
  1. body
  2. {
  3.    margin:0;
  4. }
  5. div.wrapper
  6. {
  7.    background-image:url('images/bg.png');
  8.    background-size:100% 100%;
  9.    width:100%;
  10.    min-width:1200px;
  11.    height:1650px;
  12. }
  13. div.logo_left_right
  14. {
  15.    width:39.94%;
  16.    height:204px;
  17.    border-bottom:31px solid #FFF;
  18.    float:left;
  19. }
  20.  
  21. div.logo_middle
  22. {
  23.    width:216px;
  24.    height:238px;
  25.    padding:0 30px 0 25px;
  26.    float:left;
  27. }
  28. div.logo_middle img
  29. {
  30.    width:217px;
  31.    height:206px;
  32. }
  33. div.head
  34. {
  35.    height:235px;
  36.    width:100%;
  37. }
  38.  


HTML Code: [ Select ]
<div class='head'>
   <div class='logo_left_right'>
   </div>
   <div class='logo_middle'>
      <img src='images/logo.png'>
   </div>
   <div class='logo_left_right'>
   </div>
</div>
 
  1. <div class='head'>
  2.    <div class='logo_left_right'>
  3.    </div>
  4.    <div class='logo_middle'>
  5.       <img src='images/logo.png'>
  6.    </div>
  7.    <div class='logo_left_right'>
  8.    </div>
  9. </div>
  10.  


EDIT:

I think I'll end up having to fix this problem in javascript. Since the center element needs to be a constant width, the percentage of itself varies based on screen size, so the percentage of the left and right elements become incorrect.

[solved]:

Fixed it with this function:
JAVASCRIPT Code: [ Select ]
window.addEventListener('resize', function(){
   var mainElement = document.getElementById('head');
   var left_logo   = document.getElementById('logo_left');
   var right_logo  = document.getElementById('logo_right');
   var middle_logo = document.getElementById('logo_middle');
   var m_percent   = ((middle_logo.offsetWidth / mainElement.offsetWidth) * 100);
   var lr_percents = ((100 - m_percent) / 2);
   left_logo.style.width  = lr_percents + "%";
   right_logo.style.width = lr_percents + "%";
});
 
  1. window.addEventListener('resize', function(){
  2.    var mainElement = document.getElementById('head');
  3.    var left_logo   = document.getElementById('logo_left');
  4.    var right_logo  = document.getElementById('logo_right');
  5.    var middle_logo = document.getElementById('logo_middle');
  6.    var m_percent   = ((middle_logo.offsetWidth / mainElement.offsetWidth) * 100);
  7.    var lr_percents = ((100 - m_percent) / 2);
  8.    left_logo.style.width  = lr_percents + "%";
  9.    right_logo.style.width = lr_percents + "%";
  10. });
  11.  
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9092
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Looking over this I think there is a resolution here without having to resort to JavaScript, if you are still interested. First could you clarify a few things? Does the wrapper div go around the head div as it wasn't specified in your HTML? Secondly what is the purpose of the logo_left_right class? Is it only for the purpose of having a 31 pixel bottom border? Are you sure we need those two divs?

Do you have a screenshot of what your page looks like and what it looks like when its correct?
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

The screenshot was too large a file for me to upload, but this is a diagram:

=========================   LOGO HERE   ================================

The left set of equals is one div. The logo here is a div. And the right set of equals is a div.
The 3 divs collectively span the width of the screen. The logo div is a static size, while the left and right divs need to shrink or grow in width depending on the size of the screen.


The equal signs represents the 31 pixel border, and that is the only purpose they serve. I usually like to fill in most blank spaces while building a webpage downward. The wrapper you were asking about is the parent of everything but the body.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 55 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.