|
CSS - Floating Problems
I have recently created a design in which the main content and sidebar are both floated right, but I've been having a problem.
For whatever reason, the main content has been floating slightly below my sidebar. Could anyone please look at the code and tell me how to fix it? Thanks a ton, go here to view my problematic design. I've had to write the address differently because "new user accounts are not permitted to create posts containing URLs." wendyhenrichs (dot) com (slash) pin. If you had trouble understanding my above message, here's the address with spaces in them (just remove the spaces in your address bar): http:// www . wendyhenrichs . com / pin Please just take a quick look. Thanks! Similar Tutorialsi'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on). i've got a page that basically follows this order: -header (h1) -4 main menu blocks (div-ul-li-a) -firefox plug (h3) -main content container (div) ----... (small bit of irrelevant content) ----google adsense block (p) ----entry container (div) -------entries (div-h4-ul-li) ----end entry container (/div) -end main content container (/div) -4 less-relevant menu blocks (div-ul-li-a) -footer (hr-p) if that's confusing to you, check out the source code he URL anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great. problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: URL -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks. problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right. basically, i want my xhtml 1.1 'working page' (URL) to look and act like my current page: URL ==stipulations== -i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- which is the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-) -i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element). ==source code== working xhtml (veiw source) - URL working css - URL current xhtml (veiw source) - URL current css - URL if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-) a HUGE thank-you to anybody willing to help me!! Hello. I spoke with some css developers yesterday on IRC but they failed to fix the problem. They suggested me to ask here for help so I will. I am currently making a new homepage and this is my page; mg-s.org/newly/ I had to edit most of the .css because the page was "floating". Like, some people couldn't see everything and if we zoomed in or out then the page got messed up.. So here is the current progress: mg-s.org/newly/ which is messed up. It's supposed to look like this: pokit.org/get/?00e5090c7ab5a0972f325bb16608f6fb.jpg But as you can see it's not. Here is the style.css : pastebin.com/BPrfZuBd Here is the index.php : pastebin.com/BDQKcxCE I am not that familiar with css so I need help. I've already editing on the size in the .css like on "top" to fix the #panel so it goes futher up but it's not working. Same with the #rightmenu Hi there! I'm using this code: CSS: Code:
#content {
margin-top: 75px;
width: 597px;
height: auto;
}
#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}
#right {
width: 485px;
height: 100px;
}
HTML: Code: <div id="content"> <div id="left"> </div> <div id="right"> </div> </div> --------- But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help. URL I am pretty much a css newbie, but I get everything that I have learned so far. The only problem I have is understanding how floating for layout works. I want to create a 3 column layout, with the nav menu on the left, content in the middle, and sidebar on the right. I just can't get them to align where I want them to. How would I go about in doing this? I have followed many tutorials and tried doing it on my own, and just can't get it right. I've tried various methods such as floating left and right, clearing left and right, padding, added width and negative margins. It's really frustrating. Can someone please help me out? Thanks in advance! I'm new to wordpress and have coded with CSS before but this is doing my nut in! So any help would be very helpful I'm changing and existing template to suit a customer. I have 3 images as the header to the page on float left and the other right, the 3rd is in the center. In firefox and every other normal browser its displaying correctly, rounded corners etc. but in IE the main bit of the page is below the floated images and i cannot seem to make the clear:none hack in IE work. the site is occasionsbyjennifer .co .uk (wouldn't let me add a url) If you can have a look and suggest some ideas to try as i'm bleeding fed up with this. and because i haven't coded the full site etc i think i must be missing something obvious. thanks. I am using a <dl> list to render dates and titles for a press release page. I want to display the date first and then display the title on the same line next to the date. If the title needs to wrap to more than 1 line, it should not wrap below the date - its left margin should be consistent. Simple example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
dl {
width: 100%;
}
dt, dd {
float: left;
margin: 5px;
}
</style>
</head>
<dl>
<dt>12.24.2006</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer cursus lacus. Nullam imperdiet diam sit amet dui. Suspendisse nonummy, ante ut pharetra vehicula, augue neque porta arcu, vel adipiscing lorem augue eu purus. Aenean vulputate pellentesque arcu.</dd>
</dl>
<body>
</body>
</html>
My problem is that with a long title that wraps to more than 1 line, Firefox is putting the <dd> on its own line - it will not float it next to the <dt> as it should. If you change the title to something shoter like Code: <dd>A ShortTitle</dd> It displays as it should. Any ideas why this is happening? Basically I have some body text with a sidebar, and a colored box within the body text. If the body box is below the sidebar, I want it to stretch to the width of the page. below sidebar If the body box is beside the sidebar, I don't want it to touch the sidebar (for whatever reason, the background will touch it but not the text). What I want is illustrated he not touching I've currently accomplished this by floating the sidebar to the right, floating the body box to the left, and clearing the float after the body box. This works great in Internet Explorer, but in Firefox and Opera, the body box is always placed below the sidebar: Firefox view I can accomplish what I want by using tables, but obviously I'd like to avoid that. Is there a cross browser way to get what I want? Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions. This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin. The page and the CSS all validates fine. <div id="main"> <div id="leftdiv" class="floatleft"> <p class="bold">Do you... </p></div> <div id="rightdiv" class="floatright"> <p class="bold right">Would you </p> </div> </div> #main { position: absolute; height: 70%; width: 70%; left: 5%; top: 100px; overflow: auto; } #leftdiv { position:relative; margin-left: -109px; top: 50%; margin-top: -160px; left: 20%; width: 198px; height: 299px; padding: 10px; } #rightdiv { position:relative; top: 50%; margin-top: -160px; right: 20%; margin-right: -109px; width: 198px; height: 299px; padding: 10px; } .floatleft {float:left;} .floatright {float:right; } I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image. Can someone help me fix my code to align this properly? HTML CODE: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<div id="navigation" class="menu">
<ul id="top-nav">
<li class="item4"><a href="#" title="Contact">Contact</a></li>
<li class="item3"><a href="#" title="About">About</a></li>
<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
<li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
</ul>
</div>
<div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
<div class="clear"></div>
<!-- end #header --></div>
<div id="mainContent"><h1 class="typeface-js">Main Content </h1>
<div class="typeface-js">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. </p>
</div>
<!-- end #mainContent --></div>
<div id="footer">
<p>na design inc, new york :: all right reserved 2010</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
CSS CODE: Code: body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
.oneColFixCtrHdr #container {
width: 800px;
background-image: url(images/bg-stripe.png);
background-repeat: repeat;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColFixCtrHdr #header {
padding: 10px 10px 0 10px;
background: #000000;
}
.oneColFixCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
padding: 0 10px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background: #000000;
font-family: "Courier New", Courier, monospace;
font-style: italic;
font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
.typeface-js {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
color: #FFFFFF;
}
#logo {
display: inline;
float: right;
text-align: left;
}
#logo a{
background-attachment: initial;
background-clip: initial;
background-color: initial;
background-image: url(images/logo.png);
background-origin: initial;
background-position: 0 0;
background-repeat: no-repeat no-repeat;
display: block;
height: 118px;
margin-bottom: 10px;
text-indent: -9000px;
width: 296px;
}
.msie #blog-title a {
margin-bottom: -10px;
position: relative;
}
#navigation {
background-image: url(images/bg-nav.png);
background-position: 0 0;
background-repeat: no-repeat no-repeat;
float: right;
height: 22px;
width: 474px;
margin-top: 75px;
}
#navigation ul {
}
#navigation li {
float: right;
height: 22px;
position: relative;
list-style: none;
}
#navigation li a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li a:hover {
background-image: url(images/bg-nav-btn.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
#navigation li.item1 a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn1.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li.item1 a:hover {
background-image: url(images/bg-nav-btn1.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
Example of problem If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg URL hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Ok. So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this: http://www.leeksoftware.co.uk And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is: Code:
div.logo
{
height: 70px;
width: 618px;
background-color: #476cD9;
float: left;
}
div.home
{
height: 70px;
width: 100px;
background-color: #E29942;
margin-left: 619px;
float: left;
}
div.soft
{
height: 70px;
width: 100px;
background-color: #CC3333;
margin-left: 719px;
}
div.tuto
{
height: 70px;
width: 100px;
background-color: #006666;
margin-left: 819px;
}
div.cont
{
height: 70px;
width: 100px;
background-color: #254D78;
margin-left: 919px;
}
I tired adding float left to all of them but that made them go diagonal. Can any one help? Thanks Matt Hey All: This is my first post to this forum. Any and all assistance is greatly appreciated! I am having an issue with some floating div's. I'm sure it's as easy as moving the div to a different parent but, I'm having trouble figuring this one out. My site is pretty simple. Most of the div's are floating left. I have one div that is floating right. I want the right div to stretch or contract to the full height of the content. Most of my content fits into a 740px height. There are a few that are more (up to 1500px). So, I want to put 1500px worth of images in the right column but only show as much as needed to fit the content area (most of the time only 740px). Right now, the full height of the right div is showing. I would post a link but, I'm new to the forum and it isn't allowed. If there is a way around this, I am happy to provide a link. Thanks in advance for any responses! Jeff Hi.. I have a problem with ie rendering floaring dd's. What happens is the dd stay next to each other even if i had cleared it. It works fine in FF. Can anyone share some light? ... here is the code... Code:
<dl>
<dt>Email:</dt>
<dd><input type="text" /></dd>
<dt>State:</dt>
<dd>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</dd>
<dt>Year of Birth:</dt>
<dd>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</dd>
</dl>
and the css: Code:
dl{
}
dl dt{
clear:both;
width:80px;
text-align:right;
margin:10px 0;
}
dl dd{
margin:8px 0 0 5px;
}
dl dt,dl dd{
float:left;
}
thank you in advance I have a page with content on the left and a menu with "latest" news sitting directly under it. When the pages get longer, when you scroll down there is whitespace there. So I want the "latest news" section to follow the page, however, when I set the position to fixed the news overlaps the menu.. only to be made worse by the fact that I use jquery's accordion plug-in. I'm a new member so I can't directly post a link..but freezerburned dot org /tikigaq.com/old.php I'm out of ideas. Thanks for the help. |
|||||||