1 reply [Last post]
panickz
panickz's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT+1
Joined: 2012-07-01
Posts: 1
Points: 2

Hello, my problem it´s a litle diferent than the most common in this case. I know how to align those 3, my proble, is at the width. i Want to define, for example, that the middle div have 600px, and the right and left div's should be with automatic width. When i try to it with the obvious css commands the all thing goes mad xD

I can do the align with many ways. Float all to the left then clear. Adding of course addtional commands. And with other many ways that i learned over time fighting this problem.

Well i supose it might be simple and tricky, if someone know the answer please tell me and u will be me new god. Cause i´m toasting my head off with this xD.

This is the code i´m using right know. It doesnt work well cause i haven´t define the left and right width, but it should be okey if i do it. The only problem is, well, what i explained x)

#main{
	width:100%;
	text-align: center;
	overflow: hidden; 
	}
#right, #left, #middle{
        display: block;
        float: left;
        min-height: 121px;
        }
 
		#middle{
		width:658px;
		background-image:url(../image/banner.jpg);	
		}
.clear{
	clear:both;	
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

How about using calc.

How about using calc().

  #right, #left, #middle{
    float:left; 
    min-height: 121px;
  }
 
  #middle{
		width:600px;
  }
  #left, #right{
    width: -webkit-calc(50% - 300px);
    width: -moz-calc(50% - 300px);
    width: calc(50% - 300px);
   }