[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

expanding parent div to wrap around child div

Posted on 2007-08-12
10
Medium Priority
?
506 Views
Last Modified: 2008-01-09
Hello experts,
the elements below are not displayed in Firefox.
I need to expand the "myheader" to wrap around the child div's
<div class="myheader">
<div id="myheaderA"></div>
<div id="myheaderB"></div>
<div id="myheaderC"></div>
</div>

<div style="clear:right;"></div> or clear:both is not working.
Any idea how to achieve the display?
Dimi
0
Comment
Question by:sh2gr
  • 5
  • 4
10 Comments
 

Author Comment

by:sh2gr
ID: 19680015
parent is floated right, childs floated left.
width & height is defined
0
 
LVL 28

Expert Comment

by:TName
ID: 19680038
>parent is floated right, childs floated left.
Well, then, that's the problem, I said right because I thought the children are floated right. Use clear:left or clear:both then...
0
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 1000 total points
ID: 19680042
Hello sh2gr,

There are three different ways to clear floats:

1) float the parent, .myheader in this case
2) add a clearing element like you have already tried, which should work fine
3) add overflow:auto to .myheader

Regards,

Steggs
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:sh2gr
ID: 19680060
I have tried all options, left, right, both......nothing!
arrrgh
0
 
LVL 28

Assisted Solution

by:TName
TName earned 1000 total points
ID: 19680083
>I have tried all options, left, right, both......nothing!
Maybe the problem is something else, Could you post more code?



And have a look at this. The first group of divs with cleared float, the second without:
(change the path/image names back to what you have)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">      
div {border:1px solid #ccc;}

.myheader, .myheader2 {background-color:#abc;}

#myheaderA, #myheaderB, #myheaderC {float:right}
#myheaderA {background: url(1.gif) no-repeat; width:287px;height:179px}
#myheaderB {background: url(1.gif) no-repeat; width:287px;height:179px}
#myheaderC {background: url(1.gif) no-repeat; width:287px;height:179px}

#myheaderA2, #myheaderB2, #myheaderC2 {float:right}
#myheaderA2 {background: url(1.gif) no-repeat; width:287px;height:179px}
#myheaderB2 {background: url(1.gif) no-repeat; width:287px;height:179px}
#myheaderC2 {background: url(1.gif) no-repeat; width:287px;height:179px}
</style>

</script>
</head>
<body>

<div class="myheader">
<div id="myheaderC">&nbsp;</div>
<div id="myheaderB">&nbsp;</div>
<div id="myheaderA">&nbsp;</div>

<div style="clear:right;"></div>

</div>

<br>

<div class="myheader2">
<div id="myheaderA2"></div>
<div id="myheaderB2"></div>
<div id="myheaderC2"></div>

</div>
</body>
</html>
0
 
LVL 28

Expert Comment

by:TName
ID: 19680095
So the idea is to give the parent e.g. a background(-color) to see if it expands...
0
 

Author Comment

by:sh2gr
ID: 19680136
Nothing.... I have tried all options.
It's like dead
There is no more code ... I am just testing the header section in ebay shops.
The other stuff is usual ebay scripting & html....whatever this means :-)
0
 

Author Comment

by:sh2gr
ID: 19682588
TName & Steggs,

you will not believe what the bug was:
I have defined teh class & id's with a number in fornt like class="12header" in order to avoid conflicts with ebay's default styles.
So Firefox seems not to like the numbering in front :-)
As soon as I remove it and renamed it to class="myheader" ..... the whole stylesheet runs
Stupid me?....or stupid them?

Thank you both as I was running out of options, but remembered a similar case years ago
I will split the points as all recommendations are usable
Dimi
0
 
LVL 28

Expert Comment

by:TName
ID: 19682632
>So Firefox seems not to like the numbering in front :-)
No, indeed, FF's CSS rendering will ignore any class or ID that starts with (or consista of) a number.

See e.g.
http://www.w3schools.com/css/css_syntax.asp
"Do NOT start a class name with a number! It will not work in Mozilla/Firefox."
0
 

Author Comment

by:sh2gr
ID: 19682670
:-) Thanks, that was a good, interesting lesson
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month18 days, 23 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question