Issue having DIVs expand horizontally together

Question

I'm having a problem creating a basic round corner box using divs. I'm pretty sure I'm missing something small, but I've spent a pretty much all day working and am exhausted. Was hoping somebody could spot my issue and help me out.

Here is an image of what happens -- I want the 'header' and 'footer to expand as well.

Here is the code for the divs..

<div>
<div style="">
    <div style="height:44px; width:20px; background-image:url(images/boxes/tl.png); background-repeat:no-repeat; float:left;"></div>
    <div style="min-height:34px; min-width:100px; background-image:url(images/boxes/tc.png); background-repeat:repeat-x; float:left; color:#FFFFFF; padding-top:10px;">Search</div>
    <div style="height:44px; width:27px; background-image:url(images/boxes/tr.png); background-repeat:no-repeat; float:left;"></div>
    <div style="clear:both;"></div>
</div>

<div style="">
    <div style="background-image:url(images/boxes/ml.png); min-height:20px; width:20px; background-repeat:repeat-y; float:left;"></div>
    <div style="background-color:#3F8FD2; min-width:100px; min-height:20px; float:left;" class="regularText2">Testing Content Expand Here --></div>
    <div style="background-image:url(images/boxes/mr.png); min-height:20px; width:27px; background-repeat:repeat-y; float:left;"></div>
    <div style="clear:both;"></div>
</div>

<div style="">
    <div style="width:20px; height:31px; background-image:url(images/boxes/bl.png); background-repeat:no-repeat; float:left;"></div>
    <div style="height:31px; min-width:100px; background-image:url(images/boxes/bc.png); background-repeat:repeat-x; float:left;"></div>
    <div style="width:27px; height:31px; background-image:url(images/boxes/br.png); background-repeat:no-repeat; float:left;"></div>
    <div style="clear:both;"></div>
</div>

Any/all help very appreciated! Thanks in advance.

Dima

acadler · Answer 1 · 2011-04-03T21:17:08.343

The easiest way to make round corners is to use -moz-border-radius and webkit-border-radius, however these properties are only supported on Mozilla and Webkit browsers.

However what I would do is make a main div with a relative position and then have your corners as absolute, like so:

 <div style="position:relative">
      <div style="position:absolute;top:0;left:0;"></div>
      <div style="position:absolute;top:0;right:0;"></div>
      <div style="position:absolute;bottom:0;left:0;"></div>
      <div style="position:absolute;bottom:0;right:0;"></div>
 Div content here
 </div>

You can adjust the heights and add the background images using background-position.

Also I would put the CSS in a seperate file, I just placed it inline for the purpose of example.

And `-o-border-radius`,`-khtml-border-radius` and `border: radius`. But +1 for a css fix. Incidentally, you can use backticks `\`` to surround in-line code. — David Thomas, Apr 03 '11 at 08:01

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

I recently answered a similar question and the answer might help if you want a pure CSS method, nesting rather than float may be the answer.

See this answer for possible solution

edited May 23 '17 at 10:30

Community

1
1

answered Apr 03 '11 at 08:28

clairesuzy

27,296
8
54
52

score 0 · Answer 3 · answered Apr 03 '11 at 08:04

Use jQuery round corner plugin.

http://jquery.malsup.com/corner/

It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.

Here's How to use it

You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Issue having DIVs expand horizontally together

3 Answers3

Here's How to use it

Check working example at http://jsfiddle.net/VLPpk/1