Back To Website Design Forum

problem with floating css elements.

  • altom55
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 16, 2011
  • Posts: 24
  • Loc: UK
  • Status: Offline

Post January 16th, 2011, 5:37 pm

hi everybody im happy to be new here seems like a friendly lot

i have a problem with my css code which im trying to learn
but it is very slow progress
im trying to float my menu to the left
ive looked on other sites but having no success !
it seems to be ok in ie but not ff
hope someone can help
kind regards aa...
ps ive had to remove the doctype link.

Code: [ Select ]
.colmask{
  position: relative;
  overflow: hidden;
  margin: 0px auto;       /*homepage-1st.html*/
  width: 100%;
     background-color:#ffffff;
 
}
.header{
  border-style: solid;
     padding: 0;
     border-width: 1px;
     margin:0 auto 10px;
     width: 90%;
     -moz-border-radius: 0px 0px 10px 10px;
     -webkit-border-radius: 0px 0px 10px 10px;
     border-radius: 0px 0px 10px 10px; /*opera*/
     background: #d0e4f7; /* old browsers */
  height:100px;
background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* firefox */   

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* ie */
}

.colmid{
  position: relative;
  width: 100%;
  right: 21%;
  background-color: #ffffff;
}
.colleft{
  position: relative;
  width: 100%;
  right: 58%;
 
}
.col1{
  position: relative; /*middle*/
  overflow: hidden;
  float: left;
  width: 56%;
  left: 101%;
  background-color: #ffffff;
     border-style:solid;
     border-width:1px;
     text-align: left;
}
.col2{
  position: relative; /*left*/
  overflow: hidden;
  float: left;
  width: 19%;
  left: 24%;
  background-color: #ffffff;
     border-right-style:dotted;
     border-width:1px;
     text-align: left;
     }    
.col3{
  position: relative; /*right*/
  overflow: hidden;
  float: left;
  width: 19%;
  left: 84%;
     border-style:solid;
     border-width:1px;
     background-color: #ffffff;
}
.footer{
  float: left;
  width: 100%;
  background-color: #b4caf7;
}
body {
  text-align: center;
  padding: 0px;
  margin: 0px;
  font-size: 0.8em; /*12.8px*/
     font-family: ariel, verdana, sans-serif;
  background-color: #ffffff;
  }
span.redbold {
  color:#ff0000;
     font-weight:bold;
}
#menu1 {
margin-bottom:10px;
float:left;
}
#menu1 ul
{
width: 200px;
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0px;
float: left;
}
#menu1 ul li
{
display: inline;
/* for IE5 and IE6 */
width:190px;
float: left;
}

#menu1 a
{
color: #fff;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 187px;
background-color: #686C7A;
border-bottom: 1px solid #eee;
border-left:4px solid #ffffff;
float: left;
}

#menu1 a:link, #menu a:visited
{
color: #EEE;
text-decoration: none;
}

#menu1 a:hover
{
background-color: #00BEE4;
color: #fff;
border-left: 4px;
border-left-style: solid;
border-left-color: #000000;
}

#menu1 li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}
.rating_bar {
 width: 55px;
 background: url(http://i52./2qvr1bl.jpg) 0 0 repeat-x;   /*stars*/
}
.rating_bar div {
 height: 12px;
 background: url(http://i51/169n6rr.jpg) 0 0 repeat-x;
}
  1. .colmask{
  2.   position: relative;
  3.   overflow: hidden;
  4.   margin: 0px auto;       /*homepage-1st.html*/
  5.   width: 100%;
  6.      background-color:#ffffff;
  7.  
  8. }
  9. .header{
  10.   border-style: solid;
  11.      padding: 0;
  12.      border-width: 1px;
  13.      margin:0 auto 10px;
  14.      width: 90%;
  15.      -moz-border-radius: 0px 0px 10px 10px;
  16.      -webkit-border-radius: 0px 0px 10px 10px;
  17.      border-radius: 0px 0px 10px 10px; /*opera*/
  18.      background: #d0e4f7; /* old browsers */
  19.   height:100px;
  20. background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* firefox */   
  22. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* webkit */
  24. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* ie */
  25. }
  27. .colmid{
  28.   position: relative;
  29.   width: 100%;
  30.   right: 21%;
  31.   background-color: #ffffff;
  32. }
  33. .colleft{
  34.   position: relative;
  35.   width: 100%;
  36.   right: 58%;
  37.  
  38. }
  39. .col1{
  40.   position: relative; /*middle*/
  41.   overflow: hidden;
  42.   float: left;
  43.   width: 56%;
  44.   left: 101%;
  45.   background-color: #ffffff;
  46.      border-style:solid;
  47.      border-width:1px;
  48.      text-align: left;
  49. }
  50. .col2{
  51.   position: relative; /*left*/
  52.   overflow: hidden;
  53.   float: left;
  54.   width: 19%;
  55.   left: 24%;
  56.   background-color: #ffffff;
  57.      border-right-style:dotted;
  58.      border-width:1px;
  59.      text-align: left;
  60.      }    
  61. .col3{
  62.   position: relative; /*right*/
  63.   overflow: hidden;
  64.   float: left;
  65.   width: 19%;
  66.   left: 84%;
  67.      border-style:solid;
  68.      border-width:1px;
  69.      background-color: #ffffff;
  70. }
  71. .footer{
  72.   float: left;
  73.   width: 100%;
  74.   background-color: #b4caf7;
  75. }
  76. body {
  77.   text-align: center;
  78.   padding: 0px;
  79.   margin: 0px;
  80.   font-size: 0.8em; /*12.8px*/
  81.      font-family: ariel, verdana, sans-serif;
  82.   background-color: #ffffff;
  83.   }
  84. span.redbold {
  85.   color:#ff0000;
  86.      font-weight:bold;
  87. }
  88. #menu1 {
  89. margin-bottom:10px;
  90. float:left;
  91. }
  92. #menu1 ul
  93. {
  94. width: 200px;
  95. font-family: Arial, Helvetica, sans-serif;
  96. list-style-type:none;
  97. margin:0px;
  98. float: left;
  99. }
  100. #menu1 ul li
  101. {
  102. display: inline;
  103. /* for IE5 and IE6 */
  104. width:190px;
  105. float: left;
  106. }
  108. #menu1 a
  109. {
  110. color: #fff;
  111. text-decoration: none;
  112. font-size: 13px;
  113. display: block;
  114. padding: 3px;
  115. width: 187px;
  116. background-color: #686C7A;
  117. border-bottom: 1px solid #eee;
  118. border-left:4px solid #ffffff;
  119. float: left;
  120. }
  122. #menu1 a:link, #menu a:visited
  123. {
  124. color: #EEE;
  125. text-decoration: none;
  126. }
  128. #menu1 a:hover
  129. {
  130. background-color: #00BEE4;
  131. color: #fff;
  132. border-left: 4px;
  133. border-left-style: solid;
  134. border-left-color: #000000;
  135. }
  137. #menu1 li a#current
  138. {
  139. border-bottom: 3px solid #DAD6B7;
  140. background: #00BEE4;
  141. }
  142. .rating_bar {
  143.  width: 55px;
  144.  background: url(http://i52./2qvr1bl.jpg) 0 0 repeat-x;   /*stars*/
  145. }
  146. .rating_bar div {
  147.  height: 12px;
  148.  background: url(http://i51/169n6rr.jpg) 0 0 repeat-x;
  149. }



Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www./TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii"><!--...-->
<title>Robotic-Vacuum-Cleaner.</title>
<link rel="stylesheet" type="text/css" href="homepage-1st.css">
</head>
<!--...-->
<body>
<div class="colmask">
<div class="header">
<p><b>alan</b></p>
</div>
<div class="colmid">
<div class="colleft">
<div class="col1"><!-- middle -->
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. In
gravida urna a ante volutpat vel elementum nisi luctus. Vivamus
blandit facilisis elit non pretium. Fusce iaculis dignissim
vulputate. Mauris a ornare tellus. Nunc a diam diam. Aliquam erat
volutpat.<br>
Nullam rhoncus massa a magna blandit vestibulum. Curabitur
consectetur ultrices ante. In vel orci sit amet magna vehicula
auctor et non mi. Cras elit tortor, convallis vel convallis at,
tempor eu diam?<br>
Quisque dignissim est vel quam convallis ut sollicitudin est
elementum. Duis felis ante, mollis ut lobortis quis, congue sit
amet ipsum.Lorem ipsum dolor sit amet consectetur adipiscing elit. In
gravida urna a ante volutpat vel elementum nisi luctus. Vivamus
blandit facilisis elit non pretium. Fusce iaculis dignissim
vulputate. Mauris a ornare tellus. Nunc a diam diam. Aliquam erat
volutpat.<br>
Nullam rhoncus massa a magna blandit vestibulum. Curabitur
consectetur ultrices ante. In vel orci sit amet magna vehicula
auctor et non mi. Cras elit tortor, convallis vel convallis at,
tempor eu diam?<br>
Quisque dignissim est vel quam convallis ut sollicitudin est
elementum. Duis felis ante, mollis ut lobortis quis, congue sit
amet ipsum.</p>
</div>
<div class="col2"><!-- leftcol -->
<div id="menu1">
<ul>
<li><a href="#" id="current" name="current">Item one</a></li>
<li><a href="#">Vacuum cleaner</a></li>
<li><a href="#">Vacuum Cleaner Review</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. In
gravida urna a ante volutpat vel elementum nisi luctus. Vivamus
blandit facilisis elit non pretium. Fusce iaculis dignissim
vulputate. Mauris a ornare tellus. Nunc a diam diam. Aliquam erat
volutpat.<br>
Nullam rhoncus massa a magna blandit vestibulum. Curabitur
consectetur ultrices ante. In vel orci sit amet magna vehicula
auctor et non mi. Cras elit tortor, convallis vel convallis at,
tempor eu diam?<br>
Quisque dignissim est vel quam convallis ut sollicitudin est
elementum. Duis felis ante, mollis ut lobortis quis, congue sit
amet ipsum.</p>
</div>
<div class="col3"><!-- rightcol -->
<img src="file:///C:/Users/User/Documents/grantsDiscount200-1.jpg" alt="some_text"/>
<p>right-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras congue, felis ac suscipit aliquet, nulla magna ullamcorper
arcu, sed aliquet sapien nunc nec orci.<br>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Cras porttitor faucibus purus, eget
aliquet purus viverra ac. Phasellus vel magna turpis.<br>
Aenean sodales bibendum massa vitae vestibulum. Duis ut libero in
velit feugiat laoreet eu non turpis. Nam est ante, scelerisque
ornare placerat ac, volutpat vel ipsum! Nulla tellus ipsum,
scelerisque ut imperdiet et, tristique vel tortor.<br>
Aliquam fringilla consequat nulla at convallis. Fusce porta felis
sit amet mi faucibus nec auctor nisl rutrum.<br>
Morbi luctus eleifend odio non scelerisque. Suspendisse
potenti.</p>
</div>
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www./TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content=
  6. "text/html; charset=us-ascii"><!--...-->
  7. <title>Robotic-Vacuum-Cleaner.</title>
  8. <link rel="stylesheet" type="text/css" href="homepage-1st.css">
  9. </head>
  10. <!--...-->
  11. <body>
  12. <div class="colmask">
  13. <div class="header">
  14. <p><b>alan</b></p>
  15. </div>
  16. <div class="colmid">
  17. <div class="colleft">
  18. <div class="col1"><!-- middle -->
  19. <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. In
  20. gravida urna a ante volutpat vel elementum nisi luctus. Vivamus
  21. blandit facilisis elit non pretium. Fusce iaculis dignissim
  22. vulputate. Mauris a ornare tellus. Nunc a diam diam. Aliquam erat
  23. volutpat.<br>
  24. Nullam rhoncus massa a magna blandit vestibulum. Curabitur
  25. consectetur ultrices ante. In vel orci sit amet magna vehicula
  26. auctor et non mi. Cras elit tortor, convallis vel convallis at,
  27. tempor eu diam?<br>
  28. Quisque dignissim est vel quam convallis ut sollicitudin est
  29. elementum. Duis felis ante, mollis ut lobortis quis, congue sit
  30. amet ipsum.Lorem ipsum dolor sit amet consectetur adipiscing elit. In
  31. gravida urna a ante volutpat vel elementum nisi luctus. Vivamus
  32. blandit facilisis elit non pretium. Fusce iaculis dignissim
  33. vulputate. Mauris a ornare tellus. Nunc a diam diam. Aliquam erat
  34. volutpat.<br>
  35. Nullam rhoncus massa a magna blandit vestibulum. Curabitur
  36. consectetur ultrices ante. In vel orci sit amet magna vehicula
  37. auctor et non mi. Cras elit tortor, convallis vel convallis at,
  38. tempor eu diam?<br>
  39. Quisque dignissim est vel quam convallis ut sollicitudin est
  40. elementum. Duis felis ante, mollis ut lobortis quis, congue sit
  41. amet ipsum.</p>
  42. </div>
  43. <div class="col2"><!-- leftcol -->
  44. <div id="menu1">
  45. <ul>
  46. <li><a href="#" id="current" name="current">Item one</a></li>
  47. <li><a href="#">Vacuum cleaner</a></li>
  48. <li><a href="#">Vacuum Cleaner Review</a></li>
  49. <li><a href="#">Item four</a></li>
  50. <li><a href="#">Item five</a></li>
  51. </ul>
  52. </div>
  53. <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. In
  54. gravida urna a ante volutpat vel elementum nisi luctus. Vivamus
  55. blandit facilisis elit non pretium. Fusce iaculis dignissim
  56. vulputate. Mauris a ornare tellus. Nunc a diam diam. Aliquam erat
  57. volutpat.<br>
  58. Nullam rhoncus massa a magna blandit vestibulum. Curabitur
  59. consectetur ultrices ante. In vel orci sit amet magna vehicula
  60. auctor et non mi. Cras elit tortor, convallis vel convallis at,
  61. tempor eu diam?<br>
  62. Quisque dignissim est vel quam convallis ut sollicitudin est
  63. elementum. Duis felis ante, mollis ut lobortis quis, congue sit
  64. amet ipsum.</p>
  65. </div>
  66. <div class="col3"><!-- rightcol -->
  67. <img src="file:///C:/Users/User/Documents/grantsDiscount200-1.jpg" alt="some_text"/>
  68. <p>right-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  69. Cras congue, felis ac suscipit aliquet, nulla magna ullamcorper
  70. arcu, sed aliquet sapien nunc nec orci.<br>
  71. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
  72. posuere cubilia Curae; Cras porttitor faucibus purus, eget
  73. aliquet purus viverra ac. Phasellus vel magna turpis.<br>
  74. Aenean sodales bibendum massa vitae vestibulum. Duis ut libero in
  75. velit feugiat laoreet eu non turpis. Nam est ante, scelerisque
  76. ornare placerat ac, volutpat vel ipsum! Nulla tellus ipsum,
  77. scelerisque ut imperdiet et, tristique vel tortor.<br>
  78. Aliquam fringilla consequat nulla at convallis. Fusce porta felis
  79. sit amet mi faucibus nec auctor nisl rutrum.<br>
  80. Morbi luctus eleifend odio non scelerisque. Suspendisse
  81. potenti.</p>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="footer">
  86. <p>footer</p>
  87. </div>
  88. </div>
  89. </body>
  90. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 16th, 2011, 5:37 pm

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post January 17th, 2011, 11:34 am

I assume what's causing all the problems is the "left" that you have specified in the CSS for all the columns. That means position from the left side of the item's parent which in this case is the body. So you essentially have on column thats supposed to be 101% to the right of the body meaning its ALWAYS off the screen.

To get columns to work properly you only need to specify a width and float them. However, a word of warning if you float several things and their combined widths are greater than the parent the last one will wrap to the next line.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • altom55
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 16, 2011
  • Posts: 24
  • Loc: UK
  • Status: Offline

Post January 17th, 2011, 12:28 pm

Thanks for reply graphixboy,

would it be wise to make one column smaller to accomodate the body
or maybe to not float the left col?
Im now unsure whether to use another css layout if this is broke.
but my knowledge of another layout .
Could you advise me to a simple 3 col layout maybe.
Thanks for the help

al..
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post January 17th, 2011, 3:50 pm

Your welcome. I would typically recommend making the center column a bit wider, mostly to give you room for text. One of Ozzu's excelent members has written a tutorial that should get you going.

tutorial-multi-column-layout-using-css-float
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • altom55
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 16, 2011
  • Posts: 24
  • Loc: UK
  • Status: Offline

Post January 17th, 2011, 4:11 pm

much obliged!!

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 129 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.