ramirezmaroon
New Member
What I have:A parent div \[code\].parent\[/code\] which takes the entire window \[code\]width=100%\[/code\] as width but a certain minimum width of, let's say, \[code\]min-width=800px\[/code\]. Now I have about 20 \[code\].child\[/code\] divs which, let's say, use a width of \[code\]width=300px\[/code\], an undefined height, \[code\]margin:20px\[/code\] and \[code\]display:inline-block\[/code\].The problem now is that on e.g. smaller screens two divs will be displayed each row but they won't be centered anymore since their neighbour dropped into the next row.I tried \[code\]float:center\[/code\] and \[code\]margin:5px auto 5px auto;\[/code\] on the children, but float doesn't seem to work at all and the margin just results in 0 marginSo what I want is:horizontally center all child divs in the parent while still using e.g. 80% of the screen width by adjusting the margins between them. Part 2 is more of an optional thingHow it looks right now (not working of course)HTML\[code\]<div class="buttons"> <div class="host 1"> </div> <div class="host 2"> </div> <div class="host 3"> </div> <div class="host 4"> </div> <div class="host 5"> </div> ...</div>\[/code\]CSS\[code\].buttons { position:relative; width:100%; margin:50px 0 0 0; padding:0;}.host { display:inline-block; padding:0; margin:20px 20px 5px 20px; height:20px; width:300px; float:center;}\[/code\]