Member Avatar for cuddlers89

Hello i would like to put a blob on my site.
[img][/img]

^
this is the kind of of thing want.

Thanks

  • 2 Contributors
  • 5 Replies
  • 236 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by BinaryMayhem

Dani AI

Generated

You want a rounded “blob” that grows with whatever you put inside it. Rather than fixed-height tables (the old way described), use a single container and let CSS do the work — it resizes automatically and keeps corners perfectly rounded without manually changing the height each time, which is exactly what wanted.

.blob {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  box-sizing: border-box;
  overflow: auto; /* contains floats so the blob grows with content */
}

Notes and quick troubleshooting:

  • border-radius gives the rounded corners. No fixed height means the box expands as content grows.
  • overflow: auto (or a clearfix) makes the container include floated children; without it the container can collapse and look wrong.
  • If inner elements (images, backgrounds) stick outside the rounded edges, use overflow: hidden to clip them or ensure child elements respect the container padding.
  • For decorative or complex shaped blobs, consider an SVG background or border-image (nine-slice) — those scale well and keep crisp corners. Use image-based slices only as a fallback for very old browsers.

In short: wrap page content in a single div, apply the CSS above, and avoid fixed heights or table layout. That gives a flexible, easy-to-maintain rounded container that matches the behavior you described.

Recommended Answers

All 5 Replies

Member Avatar for BinaryMayhem

eh? a blob? do you mean form? I only know the term blob from SQL...

Member Avatar for cuddlers89

sorry i didn't really explain it very well, a better example is at http://www.faceparty.com the whole page is in a blob (round edge rectangle) and this blob changes length to accomatate how much text/images are inside it.

Member Avatar for BinaryMayhem

do you mean something like this....

<HTML>
<HEAD><TITLE>my example</TITLE></HEAD>
<BODY bgcolor="#000044">
<TABLE width="200" height="100" bgcolor="blue" align="center">
<TR><TD> Resize the window </TD></TR>
</TABLE>
</body>
</html>

you can do the same thing in CSS with out tables, but I like tables because they allow for tighter control of content!

Member Avatar for cuddlers89

no, i'm trying to put the page content inside a rounded rectangle, but my site has lots of differnt pages and its updated a lot, so instead of having to change the height of the rectangle every time i add or take away suff from the site, it will just resize automatically, like faceparty's site does, and the corners need to be rounded.

Member Avatar for BinaryMayhem

yes, its based on the same principle. if you vist that page you posted above, take your mouse pointer and highlight everthing (CTRL+A). Now you will notice all the images will be slightly dithered in blue. What the trick was, is they made a table that have some rows and columns. in some of these colums they do not put text, they place images as the background. here, look. http://www.faceparty.com/images/ctr.gif.
You can do the same as well, use a image editior program such as mspaint or I would suggest photoshop and create the corners. once they are saved, create your html page to have a 3 columns. use the end columns for the images you created. and the center column for specifying a background color. remmber, any overflow that exceeds the height of the table will cause the table to grow in size, so you dont need to worry about the height!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.