Hello, I would like to switch collumn of a css style sheet and I really don't know how this work. I really need help as fast as possible. The code isn't short so I don't know if I can post it here.
post it, no matter how long it is it will show here. I dont know what you mean by "switching columns" without seeing the site in question or some code
I want my sidebar at left and my main at right here is the code: /* top elements */ * { padding: 0; margin: 0; border: 0; } body { margin: 0; padding: 0; font: normal 12px/1.7em verdana, tahoma, sans-serif; text-align: center; background: #001342 url(headerbg.jpg) repeat-x 0 0; color: #F2F9FF; } /* links */ a { color: #003366; background-color: inherit; text-decoration: none; } a:hover { color: #FAA34B; background-color: inherit; text-decoration: underline; border: none; } /* headers */ h1, h2, h3 { font: bold 1em 'Trebuchet MS', Tahoma, Arial, Sans-serif; color: #fff; } h1 { font-size: 2.5em; } h2 { font-size: 2em; text-transform:uppercase;} h3 { font-size: 1.8em; } p, h1, h2, h3 { margin: 0; padding: 10px 15px; } ul, ol { margin: 10px 30px; padding: 0 15px; } /* images */ img { background: #FAFAFA; border: 1px solid #0F7ACC; padding: 6px; } img.float-right { margin: .5em 0 1em 1em; } img.float-left { margin: .5em 1em 1em 0; } code { margin: .5em 0; display: block; padding: 20px; text-align: left; overflow: auto; font: 500 1em/1.5em 'Lucida Console', 'Courier New', monospace ; /* white-space: pre; */ background: #1E89DC; border: 1px solid #0065C6; } acronym { cursor: help; border-bottom: 1px solid #0065C6; } blockquote { margin: 10px 15px; padding: 10px 0 10px 28px; border: 1px solid #0065C6; background: #1E89DC; font: bold 1.3em/1.5em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif; } /* start - table */ table { margin: 10px 15px; border-collapse: collapse; } th strong { color: #fff; } th { background: #93BC0C; height: 3em; padding-left: 12px; padding-right: 12px; color: #FFF; text-align: left; border-left: 1px solid #B6D59A; border-bottom: solid 2px #8EB200; border-top: solid 2px #8EB200; } tr { color: #707070; height: 2.5em; } td { padding-left: 12px; padding-right: 12px; border-left: 1px solid #FFF; border-bottom: solid 1px #ffffff; } td.first,th.first { border-left: 0px; } tr.row-a { background: #F8F8F8; } tr.row-b { background: #EFEFEF; } /* end - table */ /* form elements */ form { margin: 10px 15px; padding: 10px; border: 1px solid #0065C6; background-color: #1E89DC; } fieldset { margin: 0; padding: 0; border: none; } label { display:block; font-weight:bold; margin: .4em 0; } input { padding: .3em; border: 1px solid #eee; font: normal 1em Verdana, sans-serif; color:#777; } textarea { width: 55%; padding: .3em; font: normal 1em/1.5em Verdana, sans-serif; border: 1px solid #eee; height: 10em; display:block; color:#777; } input.button { font: bold 1em Arial, Sans-serif; margin: 0; padding: .25em .3em; color: #FFF; background: #A2CC00; border: 2px solid #8EB200; } /* search form */ .searchform { background-color: transparent; border: none; margin: 0 0 0 10px; padding: 0 0 1.5em 0; width: 18em; } .searchform p { margin: 0; padding: 0; } .searchform input.textbox { width: 11em; color: #777; padding: .4em; border: 1px solid #E5E5E5; vertical-align: top; } .searchform input.button { width: 60px; vertical-align: top; } /*********************** LAYOUT ************************/ #header-content, #content, #nav { /* The width value below sets the total width of the design. It's default value is set to 93% which means that it will take up 93% of the browser window's width. You can also set it to a different percentage value (90%, 85%, etc.). This design is fluid layout by default, but you can turn it into a fixed width layout by setting a pixel value to the width (e.g. 900px, 950px). */ width: 93%; } /* box */ .box { margin: 10px 0; padding: 10px 10px 20px 10px; border: 5px solid #1F8ADE; background: url(boxbg.jpg); } /* header */ #header { height: 178px; text-align: left; } #header-content { position: relative; margin: 0 auto; padding: 0; } #header-content h1#logo-text a { position: absolute; margin: 0; padding: 0; font: bold 58px 'Trebuchet MS', Tahoma, Arial, Sans-serif; letter-spacing: -1px; color: #fff; text-decoration: none; /* change the values of top and left to adjust the position of the logo*/ top: 30px; left: 10px; } #header-content h1#logo-text span { color: #68B5F0; } #header-content #slogan { position: absolute; font: bold 16px 'Trebuchet Ms', Sans-serif; text-transform: none; color: #FFF; margin: 0; padding: 0; /* change the values of left and top to adjust the position of the slogan */ top: 100px; left: 125px; } /* header links */ #header-content #header-links { position: absolute; top: 25px; right: 10px; color: #fff; font: bold 15px "Trebuchet MS", Tahoma, Sans-serif; } #header-content #header-links a { color: #93C9F4; text-decoration: none; } #header-content #header-links a:hover { color: #fff; } /* Navigation */ #nav-wrap { float: left; width: 100%; background: url(menubg.jpg) repeat-x left bottom; clear: both; } #nav { clear: both; margin: 0 auto; padding: 0; } #nav ul { float: left; list-style: none; text-transform: uppercase; margin: 0; padding: 0; height: 64px; } #nav ul li { float: left; margin: 0; padding: 0; height: 64px; } #nav ul li a { display: block; float: left; width: auto; margin: 0; padding: 0 15px; color: #FFF; font: bold 15px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif; text-decoration: none; letter-spacing: 1px; } #nav ul li a:hover, #nav ul li a:active { color: #333; } #nav ul li#current { background: url(nav-current.jpg) no-repeat center bottom; } #nav ul li#current a { color: #333; } /* content */ #content-wrap { clear: both; float: left; background: #1183DA; width: 100%; } #content { text-align: left; padding: 0; margin: 0 auto; } /* sidebar */ #sidebar { float: right; width: 21em; margin: 10px 0 10px -21em; padding: 0; } #sidebar h1 { font: bold 1.75em 'Trebuchet MS', Tahoma, Arial, Sans-serif; padding: .3em 0 .5em 10px; color: #002368; } #sidebar ul.sidemenu { list-style:none; margin: 0; padding: .3em 0 1em 5px; font-family: 'Trebuchet MS', Tahoma, Sans-serif; } #sidebar ul.sidemenu li { padding: 0; background: url(sidebullet.gif) no-repeat .3em .5em; } * html body #sidebar ul.sidemenu li { height: 1%; } #sidebar ul.sidemenu li a { display: block; font-weight: bold; color: #E8F4FF; text-decoration: none; padding: .2em 0 .2em 30px; line-height: 1.5em; font-size: 1.35em; } #sidebar ul.sidemenu li a:hover { background: #0F7ACC url(sidebullet.gif) no-repeat .25em .45em; color: #FFF; } #sidebar ul.sidemenu ul{ margin-left: 15px; } #sidebar .sidebox { margin: 5px 15px 5px 0; padding: 0; background: url(sidebarsep.jpg) repeat-x left bottom; } #sidebar .sep{ background: url(sidebarsep.jpg) repeat-x left bottom; height: 2px; margin: 0px 15px 10px 0; clear: both; } /* main */ #main { margin: 10px 23em 10px 0; padding: 0; } #main h1 { font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif; color: #B1E100; letter-spacing: -2px; padding-bottom: 0; } #main h1 a { color: #B1E100; text-decoration: none; } /* footer */ #footer-wrap { clear: both; border-top: 5px solid #86CC15; text-align: left; padding: 1.6em 0; } #footer-wrap a { text-decoration: none; color: #5B9CFF; font-weight: bold; } #footer-wrap a:hover { color: #E8F4FF; } #footer-wrap p { padding: 10px 0; } #footer-wrap h2 { color: #E8F4FF; margin: 0; padding: 0 10px; text-transform: none; } /* footer columns */ #footer-columns { color: #5B9CFF; margin: 0 auto; padding: 0; width: 90%; } #footer-columns ul { list-style: none; margin: 10px 0 0 0; padding: 0; background: url(footer-dots.jpg) repeat-x left top; } #footer-columns li { background: url(footer-dots.jpg) repeat-x left bottom; } #footer-columns li a { display: block; font-weight: normal; padding: .5em 0 .5em 1em; width: 96%; } #footer-columns .col3, .col3-center { float: left; width: 32%; } #footer-columns .col3-center { margin: 0 15px; } /* bottom */ #footer-bottom { clear: both; color: #E8F4FF; margin: 0 auto; padding: 1em 0; text-align: center; } /* alignment classes */ .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } /* additional classes */ .clear { clear: both; } .white { color: #E8F4FF; } img.rssfeed { border: none; padding: 0 0 5px 0; background: transparent; } .post-by { font-size: .95em; padding-top: 0; } .post-footer { text-align: right; background: #1E89DC; border: 1px solid #0065C6; padding: 8px 10px; margin: 20px 15px 10px 15px; } .post-footer .date { background: url(clock.gif) no-repeat left center; padding-left: 20px; margin: 0 3px 0 3px; } .post-footer .comments { background: url(comment.gif) no-repeat left center; padding-left: 20px; margin: 0 3px 0 3px; } .post-footer .readmore { background: url(page.gif) no-repeat left center; padding-left: 20px; margin: 0 3px 0 3px; } Code (markup):
can i see the site in question (link or just url of it if you cant post live links yet) and the html that uses this css? and im not saying that ill be able to get it, becuse im kinda new to this whole thing, but youll get more attention if you ahve all those things, css, link and html.
it seems that you have your sidebar set to float right, try changing that to float left. see if that does it justice. if not, change it back and say, and ill take another more in-depth look.
change the sidebar float to left, it was already right. actually try making both the content box and sidebar float left, and if they're flush with each other, than you should just add some padding or margin
yeah, that was what i was trying to get at i just forgot to show the code. -.-' lol thanks softnmore.