Jump to content

How can I prevent a float div from wrapping when resizing browser window?


anarchipur

Recommended Posts

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? (see also the attached images below) 1. the html code:

 <!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> 

2. here teh 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;	}

post-100722-0-64964900-1347287615_thumb.png

post-100722-0-57461700-1347287631_thumb.png

Edited by anarchipur
Link to comment
Share on other sites

I don't know what you're working towards so I just stripped everything back to the basics. Viola. Make sure you test everything you put back and you probably won't get into trouble. If you do, you'll know what the problem is. New script:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">html{width:100%;height:100%;} body {padding: 0px;margin: 0px;width:100%;height:100%;}  .wrapper{float: left;width: 100%;height:100%;} .left{float: left;width: 33%;height: 100%;margin:0px;background:yellow;}.middle{float: left;width: 33%;height: 100%;background:green;} .right{float: left;width: 33%;height: 100%;background:red;}</style></head><body><div class="wrapper"><div class="left"></div><div class="middle"> </div><div class="right"> </div></div> <div class="nplogo"></div></body></html>

Edited by niche
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...