I have such a problem.

There are 3 divas:

| | | | | | | DIV1 | | DIV2 | | DIV3 | |_ _ _ _ _ _| |_ _ _ _ _ _| |_ _ _ _ _ _|
  • DIV1 throws to the left ( float: left ),
  • DIV3 rushes to the right ( float: right ),
  • DIV2 should be centered ( float: left , so written in style, and it became centered).

DIV1 and DIV3 are invisible. They appear when you hover the mouse on one object X But then DIV2 (when DIV1 and DIV3 invisible) ceases to be in the center, DIV3 it was obtained in the center due to the fact that DIV1 also has the property float: left .

So how to align it? That is, if you do not aim at the object X we get:

  | | | DIV2 | |_ _ _ _ _ _|

And when you hover:

 | | | | | | | DIV1 | | DIV2 | | DIV3 | |_ _ _ _ _ _| |_ _ _ _ _ _| |_ _ _ _ _ _|

It is desirable without tables (with the table, I know how, just wondering: can I do without it?) And to have less bad code and style.

  • 3
    the whole question looks great, but the "programmer jargon" spoils everything - Specter

2 answers 2

@Palmervan , copied your code, did not see anything except DIV 2, when you hover the mouse, the result is = 0. Therefore, here is my option:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <style type="text/css"> #wrapper { width: 900px; margin: 0px auto; } #wrapper .c-div { /*border: 1px solid #000000;*/height: 100px;} .c-div { height: 100px;} .c-div .container { display: none; } .c-div:hover .container { display: block;} #div1 { width: 199px;float: left; } #div3 { width: 199px; float: right;} #div2 { width: 498px;margin: 0px 200px;} </style> </head> <body> <div id="wrapper"> <div class="c-div" id="div1"> <div class="container">DIV 1</div> </div> <div class="c-div" id="div3"> <div class="container">DIV 3</div> </div> <div class="c-div" id="div2">DIV 2</div> </div> </body> </html>
  • I have something DIV3 does not appear. But the idea is clear, thank you. - megacoder
  • those. Do you need div1 and div3 to appear at the same time? - Barton
  • Yes, you need to at the same time. but I already figured out the idea, if you want, correct your answer for accuracy :) - megacoder

visibility: hidden; when you hover on an object X visibility: visible; .
Instead of display: none | block display: none | block :

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html dir="ltr"> <head> <style type="text/css"> #wrapper { width: 900px; margin: 0px auto; } #DIV-1, #DIV-2, #DIV-3 { width: 300px; float: left; text-align: center; } #DIV-1, #DIV-3 { visibility: hidden; } </style> </head> <body> <div id="wrapper"> <div id="DIV-1">DIV 1</div> <div id="DIV-2">DIV 2</div> <div id="DIV-3">DIV 3</div> </div> </body> </html>