html - trying to get a div to shrink width on window resize -


I just feel like a fool. Anyway - there are three columns near the page, there is a fixed width on the right and left and therefore should also be. To change the size of the browser window, I need the center column. I know I know, it should not be difficult, but this is not happening to me here: html:

 < Code> & lt; Div class = "bottom_content" & gt; & Lt; Div class = "left_col" & gt; & Lt; P & gt; Commpro.Biz & lt; / P & gt; & Lt; Div class = "s_n_icons" & gt; & Lt; Img src = "picture / facebook.png" alt = "facebook" /> & Lt; Img src = "picture / flickr page" alt = "flickr" /> & Lt; Img src = "picture / twitter.png" alt = "twitter" /> & Lt; Img src = "picture / youtube page" alt = "youtube" /> & Lt; / Div & gt; & Lt; P & gt; Username: & lt; Input = "text" size = "20" name = "user name" value = "" /> gt; & Lt; / P & gt; & Lt; P & gt; Password: & lt; Input = "text" size = "20" name = "password" value = "">> gt; & Lt; / P & gt; & Lt; Input type = "button" value = "submit" name = "submit" /> & Lt; P & gt; & Lt; A href = "#" & gt; Forgot username or password? & Lt; / A & gt; & Lt; P & gt; Click & lt; A href = "#" & gt; Here & lt; / A & gt; Sign up to receive Comro. Biz Newsletter. & Lt; / P & gt; & Lt; Div id = "twitter" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "center_col" & gt; & Lt; P & gt; What is Hot on Compro Biz & lt; / P & gt; & Lt; Div class = "hot_item" & gt; Hot Item Hot Item Hot Item Hot Item Hot Item Hot Item Hot Itemhot Item Hot Item & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "right_col" & gt; & Lt; P & gt; Our partner & lt; / P & gt; & Lt; Img src = "picture / BW.jpg" alt = "warren Buffett" /> & Lt; Img src = "images / IR_PRNewswire.gif" alt = "newswire" /> & Lt; Img src = "picture / Sysomo.gif" alt = "Sysomo" /> & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; P & gt; Copyright 2011 by Complrobiz & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

More. Css

  .left_col {float: left; Width: 190px; Height: auto; Padding-right: 5px; } .center_col {float: left; Width: Auto; Padding: 0 10px; } .hot_item {width: auto; Background color: red; } .hot_item a {text-decoration: none; } .hot_item img {float: true; Vertical-alignment: top; } .right_col {float: right; Width: 250px; Height: auto; Padding-left: 5px; } .right_col img {margin: 5px; }   

What is happening is that with the smallest content in the call of the center, three columns behave after a certain amount of content is greater, it comes under the left column And the right column goes down.

If you float an element, then you have to specify the width if you do not do that, So browsers should not behave in a particular way, so each browser can work differently.

What you can do, give the width of the columns width, so the left 10% is middle 70% and the right is 20%.

If you want a fixed width for the right and left colonel you should move the html of the right-colonel above the center-column. Then in the CSS you should remove the float at center-color and margin-left: 1 9 2px; And margin-right: 255px;

Comments

Popular posts from this blog

mysql - BLOB/TEXT column 'value' used in key specification without a key length -

c# - Using Vici cool Storage with monodroid -

python - referencing a variable in another function? -