So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:
But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form. I want the boxes to be next to each other, with about an inch of separation between them.
I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:
I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.
The two or more different div of same height 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. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.
By default, if we have multiple div tags it will be displayed one below the other. In othere words, each div will be displayed in a separate line. To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values.
This will work
<div style="width:800px;"> <div style="width:300px; float:left;"></div> <div style="width:300px; float:right;"></div> </div> <div style="clear: both;"></div>
http://jsfiddle.net/kkobold/qMQL5/
#header { width: 100%; background-color: red; height: 30px; } #container { width: 300px; background-color: #ffcc33; margin: auto; } #first { width: 100px; float: left; height: 300px; background-color: blue; } #second { width: 200px; float: left; height: 300px; background-color: green; } #clear { clear: both; }
<div id="header"></div> <div id="container"> <div id="first"></div> <div id="second"></div> <div id="clear"></div> </div>
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