CODEWITHSUNDEEP
htmlcsswidth
Will Whitehead
Will Whitehead

Reputation: 21

How to Make Container Width Responsive to Floating Elements Inside

I'm a student making a website for my assignment and I'm working on a contact form as seen here: http://www.brightpixelstudios.co.uk/contact/

I'm trying to get the border surrounding the contact form to take up only the width necessary and not 100% of its parent container.

The container has floating elements inside it, would this be what's causing the problem?

Is there any work around I could try?

Thanks in advance,

Will Whitehead

Upvotes: 1

Views: 1492

Answers (1)

Radu Chelariu
Radu Chelariu

Reputation: 446

You have three options here:

  1. set .wpcf7{ float: left }
  2. set .wpcf7{ display: table }
  3. or set .wpcf7{ display: inline-block }

All of which will cause the contact form to take up the space of its children, and not its parent. It really depends on what you're after or what suits the needs of that particular page.

Upvotes: 1

Related Questions