Member Avatar for Transcendent

How do you create box with like this with things in inside the boxes?

  • 7 Contributors
  • 8 Replies
  • 133 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #616971

Dani AI

Generated

The screenshot linked by is a set of repeatable "card" boxes. Several replies rightly pointed to using wrapped elements (, ) and even older float-based two-column ideas (). A clearer, more robust approach today is to treat each box as a card and lay them out with CSS Grid (for the overall columns) and Flexbox inside each card (for content alignment). This avoids float-clearing headaches and makes responsive sizing simple.

HTML skeleton (semantic, repeatable):

<section class="cards">
  <article class="card">
    <h3>Card title</h3>
    <p>Summary or content goes here.</p>
    <img src="..." alt="illustration">
  </article>
  <!-- repeat .card -->
</section>

Core CSS (responsive grid, simple card styling):

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

.card {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.card img { width: 100%; height: auto; display: block; border-radius: 4px; margin-top: 8px; }

Quick troubleshooting and tips:

  • Use box-sizing: border-box globally so padding doesn't inflate widths.
  • For consistent box heights, add aspect-ratio to images or use a fixed min-height on .card.
  • To push an action/button to the bottom of a card, give that element margin-top: auto (works because .card is a column flex container).
  • If legacy float layouts from older answers are used, remember to clear floats or convert to grid/flex for simpler responsive behavior.
  • For deeper reading on layout primitives, see the MDN guides for CSS Grid Layout and Flexbox.

This pattern maps directly to the visual in the image: wrap cards in a grid, style each card consistently, and use inner flexbox for vertical spacing and alignment.

Recommended Answers

All 8 Replies

Member Avatar for learner guy

You should elaborate your question as far as i have understood here is what u r asking


This is called two column website . .if u now how to work with divs apply following following approach
-Creae a wrapper (a large div for whole webpage)
-Create two divs inside the wrapper - set one to float:left , the other to float:right (this will create two columns)
-Then indiviually in these two columns start adding divs (boxes)

Member Avatar for Transcendent

Do you know get a good tutorial on this?

Member Avatar for mikulucky

I'm slightly confused, do you mean the boxes on the right, or the left.

No the less, they are standard divs. Maybe post a wire frame of what you want or something?

Member Avatar for Transcendent

Do you have another tutorial that get into more details like where do you put your contents for each box and how you can decided where the boxes go and their size?

more info:
you see how the boxes are in the link? I want to create boxes like that with content in them.

Member Avatar for jackbauer24

boxing an image --

<img src = "imgsrc.jpg/png" width="yw" height="yh" alt="whatever" [B]border="1"[/B]

legend=
yw = your width
yh = your height

Member Avatar for EmilyJohnson

How do you create box with like this with things in inside the boxes?

Use div tag to create needful structure.

Member Avatar for Member #616971

There are many ways to create boxes. Either you can use, divs or tables with border style or also image itself with border style.

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.