• Locked
2 replies [Last post]
Mon, 2012-09-10 14:19
anarchipur
Offline
newbie
Last seen: 9 years 49 weeks ago
Timezone: GMT+2
Joined: 2012-09-02
Posts: 8
Points: 11

Hi,

my css layout consists of a wrapper grid containing three divs, "left", "middle" and "right" (see the code below). I marked their borders with a dashed line so I can see their behaviour when resizing the window.

How should I change my code in order to prevent the browser from wrapping the right part down? (could'nt find a working solution in the web)

1. Here the first image - normal state:
normal.png

2. Here the problem when resizing:
bad-wrapping.png

3. Here the css:

html{
 width:100%;
 height:100%;
 
}
 
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
 
   width:100%;
   height:100%;
 
   min-width:100%;
   min-height:100%;
 
 /*  font-size: 0.9em;*/
   background:#000000 url(../images/sky-tile-halves.png) 50% 0 repeat-y;
}
 
 
.wrapper{
   position: relative;
   float: left;
   left: 0%;
   width: 100%;
   height:100%;
 
 
   /*
   border-color:red;
	border-style:dashed;
	border-width:2px;  
   */
   background-color: transparent
}
 
.left{
   position: relative;
   float: left;
   left: 0px;
   width: 33.3%;
   height: 100%;
   margin:0px;
 
    border-color:yellow;
	border-style:dashed;
	border-width:2px;  
 
   background-color: transparent;  
}
.middle{
   position: relative;
   float: left;
   left: 0px;
   width: 33%;
   height: 100%;
 
 
    border-color:green;
	border-style:dashed;
	border-width:2px;  
 
   background-color: transparent;
}
 
.right{
   position: relative;
   float: left;
   left: 0px;
 
   width: 33%;
   height: 100%;
   background-color: transparent; 
 
    border-color:red;
	border-style:dashed;
	border-width:2px;     
}

4. the HTNL:

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
	<head>
		<link rel="stylesheet" href="css/style-grids.css" />	
	</head>
 
<body>	
	<div class="wrapper">
	     <div class="left"></div>
	     <div class="middle"> </div>
	     <div class="right"> </div>
	 </div> 
 
	  <div class="nplogo"></div>
	</body>
</html>

Top
Tags:
Mon, 2012-09-10 20:32
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 20 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi anarchipur You will most

Hi anarchipur
You will most likely find that without the border the columns will stay.
basically you have 2px + 33.3% +2px + 2px + 33% + 2px +2px + 33% +2px;
you have about 0.7% for the borders (12px)
If you need the borders you could use % for there widths as long as they add up to less then 100% with the columns.

Top
Mon, 2012-10-22 09:50
#2
kevin619
kevin619's picture
Offline
Regular
Fremont,CA
Last seen: 8 years 14 weeks ago
Fremont,CA
Timezone: GMT+5
Joined: 2012-02-16
Posts: 24
Points: 28

You could try interrogating

You could try interrogating the blue element for its current width, -= 400px, and add 400xp to red ad the same time, then toggle, blue width = 0px and red += 400px?

var width $('bluebox').width();
width = width - 400;
$('bluebox').css('width', width + 'px');
$('redbox').animate({width: 'toggle'});

Make sure you check out my>>App Designers Blog<<

Top
  • Locked