Jump to content
anarchipur

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

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...