Menu
I am creating a sample website which has three divisions horizontally. I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html> <title> Website Title </title> <div id="the whole thing" style="height:100%; width:100%" > <div id="leftThing" style="position: relative; width:25%; background-color:blue;"> Left Side Menu </div> <div id="content" style="position: relative; width:50%; background-color:green;"> Random Content </div> <div id="rightThing" style="position: relative; width:25%; background-color:yellow;"> Right Side Menu </div> </div> </html> http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
481
Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
<head> and <body> doctype Here's a better way to format your document:
<!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> Here's a jsFiddle for good measure.
192
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container { height: 100%; width: 100%; display: flex; } #leftThing { width: 25%; background-color: blue; } #content { width: 50%; background-color: green; } #rightThing { width: 25%; background-color: yellow; }<div id="container"> <div id="leftThing"> Left Side Menu </div> <div id="content"> Random Content </div> <div id="rightThing"> Right Side Menu </div> </div>Just had to add display:flex to the container! No floats required.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
