anarchipur Posted September 10, 2012 Share Posted September 10, 2012 (edited) 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; } Edited September 10, 2012 by anarchipur Link to comment Share on other sites More sharing options...
niche Posted September 11, 2012 Share Posted September 11, 2012 (edited) 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 September 11, 2012 by niche Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now