|
CSS - Img {float:right} Not Working In A Div With %widths?
http://whittierpunks.com/test/bio.html and stylesheet
In the CENTER <div>, I want to have some text, with an image floated to the right. It's basic; there is no problem with an internal stylesheet (like the example at w3c)...but as you can see from my exapmle, its not doing that at all. And I'm not sure where the problem lies Could someone show me how to correct this? Many thanks, Similar TutorialsI am having an issue with a div that I am trying to float and set the width of. The page works fine in Firefox, but in IE it doesn't display correctly, Here is the pertinent code, <div id="textbar" class="sidebar" style="width:175px;"> <div id="handle"> <a href="#"><img src="http://swvtc06/swvtc/images/collapse.jpg" border="0" alt="Click to Collapse the Navigation Bar" onclick="sidebar()" /></a> </div> <div id="sbText" style="display:block;"> <!--#include virtual="/swvtc/include/nav_test.htm" --> <!--#include virtual="/swvtc/include/smweather.asp" --> </div> </div> Here is the CSS for the #handle div, #handle { float:right; width:9px; } In Firefox, the handle div is correctly inline with the background graphic. In IE, the handle div is about 9 pixels to the left of where it should be. We are in the ancient times, we still are mandated to be using IE 6, so that is where I am having the problems. Where am I going wrong? Thanks, Drew Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
Hi, I'm puzzling with an annoying thing quite some time now so I decided to ask for some help. On a website called 'Unlock LG online' (can't post links :S, if you use that exact search term the first result in google) when you select a model and thus go to, for example: 'Unlock LG online U990' 2nd search result in google (again can't place links) you can see the photo of the phone to the right and some text at the left. Now in FF and IE8 no problem at all. But in IE6 and 7 it is not floating but the text just goes under the 'not floating' image. Now I though the double margin bug so I added 'display: inline' (also tried position: inline) but that doesn't work either. I've been playing with the margins and padding but no luck either.. in other words I have no clue any more.. Please give me some tips. Thanks! Best regards, I'm relatively new to CSS and I am struggling with my style sheet for IE. I've put my images in div's and applied a float to them. It looks great in FF and Chrome, but not so much in IE. Being a new user to the forum, my url has been blocked. The site is swampasspowder dot com. Any help or comments are appreciated. Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks. The site Code:
<div id="searchbox">
<h2 id="searchbox_header">Browse Bus Rates and Amenities</h2>
<p style="padding-left: 5px; ">Search by Bus Type:<br />
<select name="bustype">
<option selected value="">All Bus Types</option>
<option value="1" >Deluxe Motor Coach</option>
<option value="7" >Double Decker</option>
<option value="4" >Entertainer</option>
<option value="5" >Executive</option>
<option value="9" >Limo Bus</option>
<option value="2" >Minibus</option>
<option value="3" >School Bus</option>
<option value="0" >Tour Operator</option>
<option value="6" >Trolley</option>
<option value="8" >Van</option>
</select></p>
<p style="padding-left: 5px; ">Departure State / Province:<br />
<select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option>
</select></p>
<p style="padding-left: 5px; ">Departure City / Metro Area:<br />
<select name="city">
<option value="">Entire State</option>
</select></p>
<div id="searchboxrightcol">
<p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p>
<p>Browse local rates & inventory. Locate specific bus types</p>
<p><a href="#">Search</a></p>
</div>
<div id="searchbox_footer">
<p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p>
</div>
</div>
CSS: #searchbox { width: 400px; margin: 0; padding: 0; border: 1px solid #003366; background: #CCCCFF; } #searchboxrightcol { padding: 0; margin: 0; margin-left: 170px; padding-left: 5px; } #searchboxleftcol { width: 160px; float: left; padding: 0; vertical-align: top; border-right: 1px solid black; } #searchbox p { padding-left: 5px; padding-right: 5px; width: auto; height: auto; } #searchbox_header { text-align: center; color: white; background: #003366; padding: 0px; margin: 0px; width: auto; } #searchbox_footer { width: 400px; text-align: center; color: black; padding: 0px; margin: 0px; } #searchbox a, #searchbox a:visited { background: #336699; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; color: white; font-weight: bold; text-decoration: none; } #searchbox a:hover { background: #FC7400; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; text-decoration: none; font-weight: bold; } hey guys i have an issue with a multicolumn float issue on my page here is the css Code:
vi portal.css
#contentcontainer {
position: absolute;
background-color: blue;
top: 20px;
left: 100px;
right: 100px;
width: 500px;
}
#protal .portal-column {
float: left;
width: 30%;
}
#portal #portal-column-block-list {
position: absolute;
width: 200px;
top: 180px:
left: 10px;
z-index: 10;
}
#portal .block .block-toggle {
background-image: url(block-slide.png);
float: right;
cursor: pointer;
}
#portal .block .block-toggle span {
display: none;
}
#portal .block-list-handle, #portal .handle {
cursor: move;
}
and the HTML in question Code: <div id="contentcontainer">
<div id="protal">
<div class="partal-column" id="portal-column-0">
<h2>Column 0</h2>
</div>
<div class="portal-column" id="portal-column-1">
<h2>Column 1</h2>
</div>
<div class="portal-column" id="portal-column-2">
<h2>Column 2</h2>
</div>
<div class="portal-column" id="portal-column-block-list" style="display: none;">
<h2 class="block-list-handle">Block List</h2>
<!-- Blocks go here -->
<div class="block">
<h3 class="handle">
<a class="block-toggle"<span>toggle</span></a>
<!-- title of block -->
testing links
</h3>
<div class="content">
<!-- Content -->
<?php
$content = array(1 => 'Home', 2 => 'About', 3 =>'Contact');
echo ("<ul> \n");
foreach ($content as $id => $page) {
echo ("<li><a href='?id=$id'>$page</a></li> \n");
}
echo ("<ul> \n");
?>
</div>
</div>
</div>
</div>
</div>
the problem is that it appears that only column-2 and column-1 maybe are floating to the left properly. anyone got some suggestions on whats wrong When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! HTML: Code:
<div id="title" class="title_lower_color">
<div class="title">TITLE</div>
</div>
<div id="main">
<div class="grouptitle1">Group 1
<div class="grouptext1">blah blah blah blah blah blah blah blah
</div>
</div>
<div class="grouptitle2">Group 2
<div class="grouptext2">blah blah blah blah blah blah blah blah
</div>
</div>
</div>
CSS: Code:
body {
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
.title {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #000000;
font-weight: bold;
background-color: #CCCCCC;
border-color: #000000;
border-bottom-style: solid;
border-bottom-width: thin;
width: 100%;
float: left;
position: relative;
}
.title_lower_color{
background-color: #666666;
border-color: #000000;
border-left-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-top-width: thin;
width: 100%;
height: 40px;
float: left;
position: relative;
}
.grouptitle1{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
width: 300px;
float: left;
}
.grouptitle2{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
margin-left: 10px;
float: left;
}
.grouptext1 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
width: 300px;
}
.grouptext2 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
}
I've only just started using CSS rather than tables. The title bit is ok. The problem is the main <div>. In Firefox l can't seem to get the two divs (grouptitle1 & grouptitle2) to float side by side. The only way l can do it is by setting grouptitle2 to a certain width. But l want grouptitle2 to fill the remaining width of the screen whatever size the browser is and not be a set width. Is there any way so that l can make the two divs appear side by side without adding a width to the grouptitle2?? here's a working version: Clicky subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> I am having trouble trying to get the divs following my first left hand menu to all stay the same width but it is not working. When I set the first div width which contains the Javascript menu on the left, I cannot set the following div (which is going to contain CSS highlighted links) to go to 20% width so it is the same as the first div with the menu in it. here is the link to my page so you can see what I mean. http://kevinobrien.ca this is what I have in the style sheet so far for that side. If I add the width to div#sidebar2 it does not stretch that part but rather narrows it and messes it up div#sidebar {display: block; position: absolute; top: 5.4em; left: .4em; width: 20%; padding: 0; margin-left: .5em; border: 1px solid #335; margin-top: 2em;} div#sidebar2 {position: absolute; border: 1px solid #335; margin-top: 1em;} any help with this is greatly appreciated K.O. q)When creating webpages with css , are you supposed to use pixels or % for page widths? If I use pixels then i create for a 800X600 screen only, but it won't look messy when screen resized which I prefer. For some reason beyond me, my site displays perfectly in firefox, and opera. the width of the wrap which is supposed to be 1068 (I think off memory..) and in browsers such as chrome, ie8, and safari the wrap takes up the entire length of the screenn instead of that 1068. I tried zooming out to see if it was that issue and its not. My code is valid html/css and its not just some IE bug. Any help would be appreciated. www.devwebsites.com Thanks. Code: <table style="width:90%;">
<tr>
<td>
Text goes here
</td>
<td>
Text 2 goes here
</td>
</tr>
</table>
The problem is that since I say width:90%, the second td is all the way to the right of my table. The width of the first table depends on the length of the text to be inserted. How can I have the text for the second td show up just to the right of where the 1st td ends? I'd like to do this without having to specify a fixed with in the first td. Hi, I'm Currently Redesigning my site Here And it all looks perfect in IE but when i go onto FireFox it looks mostly the same. Just One Problem The Menu At The Top, The Widths And There Is Gaps. Ive Been Working Hard And Cant Seem To Find The Problem. Heres The CSS for the whole menu: Code:
.navigation {
margin : 0 auto;
padding : 0;
font-family : franklin gothic book;
background-color : silver;
width : 59em;
min-height : 1em;
min-width : 59em;
text-align : center;
margin-top : 5px;
}
.navigation li.t {
min-width : 1em;
width : 1em;
min-height : 1em;
float : left;
background : silver url(img/tl.gif) no-repeat top left;
}
.navigation li.b {
min-width : 1em;
width : 1em;
min-height : 1em;
float : right;
background : url(img/tr.gif) no-repeat top right;
}
.navigation li.tls {
min-width : 1em;
width : 1em;
background : silver url(img/tls.gif) no-repeat top left;
}
.navigation li.trs {
min-width : 1em;
width : 1em;
background : url(img/trs.gif) no-repeat right top;
margin : 0;
padding : 0;
}
.navigation ul {
color : white;
list-style : none;
min-width : 59em;
display : inline;
width : 59em;
margin : 0;
padding : 0;
}
.navigation li {
min-width : 15em;
max-width : 15em;
width : 10em;
height : 1em;
display : inline;
}
.navigation li a {
height : 1em;
min-width : 11em;
max-width : 11em;
width : 10em;
color : black;
text-decoration : none;
background : white;
}
.navigation li.tl {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/tls.gif) no-repeat top left;
}
.navigation li.tr {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/trs.gif) no-repeat right top;
}
.navigation li a.mi {
margin : 0 auto;
padding : 0;
min-width : 11em;
max-width : 12em;
margin-top : 5px;
width : 11em;
color : black;
text-decoration : none;
background : white;
}
.navigation a:hover {
text-decoration : underline;
}
I Just Cant Seem To Find Out What To Do, Please Could SomeOne Help, Thanks In Advance, Jamie i recently changed up my homebrew forum's css on http://www.fasttracksites.com/forum/index.php and im having problems with it in FireFox, Opera and IE looks fine(usually its just the opposite). It looks like its not accepting the widths from http://www.fasttracksites.com/forum...FTSBlue/dim.css this is the file that contains the dimensions of each item, the other pages(if you click on one of the forum names) they are using the same widths for the last post and such and look fine, can someone please help? hi, i'm trying to create a horizontal navigation bar using Div's and css. So what i have is a background image for the background of the navigation bar, and then the links as images. i want to give varying widths to each link. i.e. if we were talking tables, i'd give the first cell with the first link a 10% width, the second a 8% the third a 15% etc... my question is, how do i do that with Divs? do i have to create a separate id (#) for each link? or can i specify a width in the div tag in the html (<div width=10%>) for example? Thanks, Heidi It has been a long day and tomorrow will be a longer. I give up trying to fix my problem and searching. So, that leads me here, where I will ask my question and once again receive the n00b stamp on my head. I hate css... but love it so. go to church css file Now why the heck does IE not give a crap about the width I set. increase the text size(ctrl+scrollWheelUp) and you will see that it is acting like an auto width. It is the same if I switch between % em pt px. Firefox views it just fine expect for the inner box going outside it's container on the navbar. Oh and the lists are shifted over to the right and the text goes outside the box and doesn't wrap inside. List problem with IE before and I fixed it only for it to show up in firefox. These are probably easy fixes but I am too tired right now and know I will not have time in the next couple of days to mess around. So, answer me up please. Bonus points for posting a link to a topic that all ready covers this that I blatantly missed. Sorry for the banner(too big file). The whole banner/header top will change but the navbar and content area concept is going to stay almost like it is so I need ot firgure this out. Grrr for some particular reason in Firefox and IE div.userinfo wont stay to its assigned width.. what it is doing is that its expanding its width to fill up the text.. but.. it should just break to a new line. html Code: Original - html Code <div class="container"> <div class="subject">this is for your subject</div> <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div> </div> <div class="container"> <div class="subject">this is for your subject</div> <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div> </div> css Code: Original - css Code div.container { border: 1px solid #000000; position: relative; margin: 0 auto; width: 580px; height: 432px; } div.subject { position: absolute; border: 1px solid #cccccc; top: 0px; left: 290px; width: 290px; height: 50px; } div.userinfo { position: absolute; border: 1px solid #cccccc; width: 15px auto; height: 150px; }
div.container {
Anyone knows why? i even changed white-space: nowrap, and etc. I want some particular text on my page to have an underline that keeps going after the text has finished so it spans 100% of the page (actually a div, not a page). It's easier to understand what I'm trying to do if you look at the links at the bottom of my post. My problem is that I got it to work fine on Internet Explorer, but not on Mozilla. Here is the webpage: http://www.eutron-inc.com/newsite/ And here is the stylesheet: http://www.eutron-inc.com/newsite/stylesheet.css So... can somebody help me? |
|||||||