CODEWITHSUNDEEP
phpcssxhtmlhtmlalignment
Dima
Dima

Reputation: 11

Issue having DIVs expand horizontally together

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.

http://img805.imageshack.us/i/divs.png/

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

Upvotes: 1

Views: 262

Answers (3)

acadler
acadler

Reputation: 41

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.

Upvotes: 3

clairesuzy
clairesuzy

Reputation: 27624

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

Upvotes: 1

Hussein
Hussein

Reputation: 42818

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>

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

Upvotes: 0

Related Questions