How to put those things next to eachother? CSS


Tags: html,css,web

Problem :

basically my website looks like this: http://i.imgur.com/6xcWTxR.png I want to put that container with text in it next to the image. How can I do that, and keep it centered? I'll put my code below.

<body>
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><a href="#" id="clickable_div"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"></a></div>
<div id="nav_menu" style="display:none; background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
  <center>Endless Void></center>
</div>
</body>


Solution :

You will more than likely have to use:

margin: 0 auto;
width: /* your width here */

to center your content along with either floating your two DIVs or absolutely positioning them.

When using margin: 0 auto; you need to supply a width value or it will not work as once the browser has a width to work with it can auto calculate the margins for you. You can apply margin: 0 auto to the <body> tag or a another wrapping element like a <div> that contains your image and text DIVs.

A <div> is a block level element that will try to take up the whole width of the page by default. That is why you need to float them or use some kind of positioning that changes that behavior and get the two elements to line up next to one another.

Here is a basic example in a jsFiddle: http://jsfiddle.net/vn34bw84/


    CSS Howto..

    How can I cut too wide image in HTML?

    How to set shadow on top of a CSS border?

    How can I indent all text in a paragraph except the first line?

    How to style