Member Avatar for zobadof

Hello,

I've been working on a new charity website; . As you can see there is black box, this is the slider I've just got to put the images in now. However, I was wondering how to get a text box either side. The same as "test" either side and then remove the test box and the other two images.

Thanks.

  • 3 Contributors
  • 3 Replies
  • 77 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

A simple, robust way to get text boxes on each side of your center slider is to wrap three columns and use Flexbox. That avoids vertical-centering pain and clearing issues you get with floats, and it sidesteps the inline-block whitespace quirks. and pointed to inline-block and floats — both are valid fallbacks, but Flexbox is cleaner for equal-height columns and responsive stacking.

HTML and CSS example (replace the slider inner markup with your slider plugin):

<div class="slider-wrap">
  <div class="side-box left">Left text box</div>
  <div class="slider"> <!-- slider markup here --> </div>
  <div class="side-box right">Right text box</div>
</div>
.slider-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.side-box {
  width: 220px;
  box-sizing: border-box;
  padding: 12px;
}
.slider {
  flex: 1 1 auto;
  min-width: 0; /* allows children to shrink properly */
}
.slider img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 640px) {
  .slider-wrap { flex-direction: column; align-items: stretch; }
  .side-box { width: 100%; }
}

Troubleshooting notes: if you stick with inline-block, watch the whitespace between elements (font-size:0 on parent or remove the gap). If you use floats, remember to clearfix the container. Ensure slider images use max-width:100% so they stay responsive. Flexbox compatibility and concepts are documented on MDN: Flexbox guide.

Recommended Answers

All 3 Replies

Member Avatar for hericles

You can place divs side by side by using the CSS style display: inline-block; for each of them. This makes block elements act like inline elements (i.e. line up on the same line not under each other).

Member Avatar for zobadof

o.O <-- Confused!

Member Avatar for teedoff

Why not use floats to position divs side by side? Thats what the float property is for.

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.