13 replies [Last post]
chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

Hi guys,

I am new to CSS and am having a problem with a float left and float right in the same element

Details
edit

.region .heading a
{
color: #666;
font-size: 80%;
float: right;
}
.region .heading span
{
color: #666;
float: left;
font-weight: bold;
font-size: 16px;
text-transform: capitalize;
width: 100%;
}

In IE8 and FF it works ok, but in IE7/IE8 Compability mode the right floating link refuses to stay on the same line (see below).
ie7bug.JPG

I know this problem is caused by the float right as when I remove it both the heading and the href stay at the same level (through both left floated which I don't right). Am I doing something wrong here with the way I'm doing my markup or is there some 'fix' I need to apply.

Thanks Smile

AttachmentSize
chrisb.html_.txt88.89 KB
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

can you provide a link? or at

can you provide a link? or at least let us see all your html and css using code brackets.

chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

Here you go

Sorry.. I did post it but I think I didn't put it the the right mark up tags, it got cut off...

<div class="region">
    <div class="heading clearfix">
        <span>Details
            <a href='somepage.html'>edit</a>
        </span>
</div>
 
.clearfix:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix
{
    display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix
{
    display: block;
}
/* End hide from IE Mac */
html[xmlns] .clearfix
{
    display: block;
}
* html .clearfix
{
    height: 1%;
}
 
.region
{
    margin-bottom: 10px;
}
 
.region .heading a
{
color: #666;
font-size: 80%;
float: right;
}
.region .heading span
{
color: #666;
float: left;
font-weight: bold;
font-size: 16px;
text-transform: capitalize;
width: 100%;
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

umm, can we please see ALL

umm, can we please see ALL the code.

chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

I posted the bit that was

I posted the bit that was relevent to my question, but here is everything, including the page container wrappers. Hope this is useful.

<div id="wrapper">
<div id="bodyContainer" class="clearfix">
<div class="colLeftOneThird">
          <div class="region">
              <div class="heading clearfix">
                  <span>Details
                  <a href='somepage.html'>edit</a>
                  </span>
          </div>
</div>
</div>
</div>
 
/* START - ClearFix */
.clearfix:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix
{
    display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix
{
    display: block;
}
/* End hide from IE Mac */
html[xmlns] .clearfix
{
    display: block;
}
* html .clearfix
{
    height: 1%;
}
/*END - ClearFix */
 
/* START - Main HTML MarkUp Elements */
 
*
{
    font-family: Arial, Helvetica, sans-serif;
}
 
 
body
{
    background-color: #006dbb;
    margin: 0px;
}
 
html, body, #aspnetForm
{
    height: 100%;
}
* html #wrapper
{
    height: 100%;
}
 
#bodyContainer
{
    background-color: #FFFFFF;
    border: thin solid #dbdbdb;
    height: 100%;
    margin-left: 19px;
    margin-right: 19px;
}
 
.region
{
    margin-bottom: 10px;
}
 
.region a:link, .region a:visited
{
    color: #006dbb; /*005391*/
    border-bottom: dotted thin;
}
 
.region div.heading
{
    background: url('Images/grey_header_bg.gif') repeat-x top;
    border-bottom: thin solid #CCC;
    height: 17px;
    padding: 6px;
}
 
.region .heading a
{
    color: #666;
    float: right;
    font-size: 80%;
}
.region .heading span
{
    color: #666;
    float: left;
    font-weight: bold;
    font-size: 16px;
    text-transform: capitalize;
}
 
.regionItemHeader a
{
    display: block;
    float: left;
    margin-left: 5px;
    padding-top: 5px;
 
}
.regionItemHeader label
{
    float: left;
}
 
.regionItem
{
    padding: 5px 1px 5px 1px;
 
}
.regionItem label
{
    color: #006dbb;
    font-size: 10pt;
    font-weight: bold;
    padding-left: 10px;
}
.regionItem label.horizontal
{
    display: block;
    float: left;
    padding-top: 0;
    width: 70px;
}
 
.regionItem span
{
    /*color: #333;*/
    display: block;
    font-size: 9pt;
    padding-left: 10px;
    word-wrap: break-word;
}
.regionItem span.horizontal
{
    display: block;
    float: left;
    padding-left: 5px;
}
 
.regionItemLabel
{
    margin-right: 5px;
}
 
.colLeftOneThird
{
    float: left;
    margin: 1% 1% 1% 1%;
    width: 31%;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If that's all your HTML, you

If that's all your HTML, you are missing a lot of information, including doctype, html, head, and body tags.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

Give me some credit! My code

Give me some credit! My code has html/body tags doc type etc in it. All I'm showing is the key bits, rather than posting 1000's of lines of html from the browser "View Source". I've included all the markup that surrounds the bit of code that I'm having trouble with.

So regardless of that is anybody able to assist me with my problem?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Give US some credit, we've

Give US some credit, we've been doing this a long time, and we're doing it for free.
If you are unable/unwilling to post 1,000s of lines of HTML, please post a link.

If you don't know the answer, who's to say that the issue isn't where you think it is?
More than once, sheesh, more than several hundred times the user thinks they know where the problem is and they are wrong.

This is why we ask for all of your code or a link. A link is always better, we can use our tools to edit your site live and find out what the issue is.

http://csscreator.com/node/19116

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

(No subject)

The site itself is login in only/is secured so I can't give you a direct link I'm sorry. I was just tyring not to 'clutter' up the forum with 1000's of lines of html - I promise I've posted all the code/css that in anyway interacts with that one little piece of code I'm having troubles with. You also have to understand that for security reasons/privacy I have to strip this mark up of anything personal (big job).

Still if it helps (here is the whole lot) thanks again (from view source) with personalised bits missing.

chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

I posted all code, however it

I posted all code, however it seems it was so long it didn't come through correctly, I put it in code tags.

Code attached to the topic: Tony

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 31 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

See if this helps text left

See if this helps text left and right

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

Thanks for the advice, but it

Thanks for the advice, but it didn't seem to help. The heading is on the left and the link on the right which is the way I wont it (using floats) but it's just the right float makes the link push down the line (IE7 Only, fine in all others). I'm not sure if this is a clearfix issue or something like that?

I posted all the css (as requested) however it doesn't seem to show up (yet it's all listed there why I click edit) - can the forum not handle that much markup posted (several 1000's lines).

Thanks for you're help/patience.

chris_b
Offline
newbie
New Zealand
Last seen: 11 years 47 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2010-03-04
Posts: 8
Points: 9

Tony was nice enough to

Tony was nice enough to inform me that the code upload was to large and has attach it to the thread as an attachment, thanks Tony.

davestone
davestone's picture
Offline
Enthusiast
Last seen: 11 years 29 weeks ago
Timezone: GMT-7
Joined: 2009-05-11
Posts: 74
Points: 43

You can try

You can try adding a width to your floated items. Since these are block level items, your browser should render them so. However with IE7 you still might need to specify widths on the floated items so the browser will know when one element 'ends'.