I am trying to achieve following with my code: I would like to have a div container, div#title-box, that is centered. Inside that div container I want to have 3 other div containers, div#logo, div#title, div#subtitle (look at the code to see how exactly they are displayed)Now the actual problem: The div#logo has a given width, the other two however don't, they float. How can I have have the div#title-box wrap around the other three divs but at the same time staying centered. Another problem I see is that the div#title-box cannot have a fixed width.Any ideas. Thanks!EDIT: The code below has to be modified so that the div#title-box wraps around the other divs and stays centered.If anyone needs to play around with the code, here is it with a full example:\[code\]<!DOCTYPE html><html><head><style> div#title-box { max-width: 500px; display: block; height: 600px; margin: 0 auto; position: relative; } div#logo { padding: 0; margin: 0; position: absolute; top: 100px; left: 5px; width: 100px; height: 100px; overflow: auto; background: #ff0000 no-repeat; background-size: 100% 100%; border-radius: 15px; float: left; } div#title { padding: 0; margin: 0; position: absolute; left: 110px; top: 100px; bottom: 20px; right: 10px; overflow: auto; float: left; } div#subtitle { padding: 0; margin: 0; position: absolute; top: 140px; bottom: 20px; right: 10px; left: 110px; overflow: auto; float: left; }</style></head><body><div id="title-box"> <div id="logo"> </div> <div id="title"> <h1>Hello</h1> </div> <div id="subtitle"> <h3>A A A A A A A A A A A A A A A!</h3> </div> </div>\[/code\]
How can I center a div container with floating div with CSS?
- Thread starter Eatfleann
- Start date