Jump to content

Divs side by side inside another div


mholmes

Recommended Posts

Here is my current website:http://www.uoksoftware.com/news/ Im trying to recreate it using ASP and build it my self with out the aid of a web page builder. Here is the CSS Code:

#DivMain    {	    background-color:White;	    width:928px;	    height:580px;	    top:200px;	    margin-left:auto;	    margin-right:auto;    }#DivText1    {	    width:600px;	    height:330px;	    top:290px;	    position:relative;	    left:10px;	    right:auto;	    z-index:0;	    margin-left:15px;	    margin-right:auto;    }#ImgCoins    {	    width:260px;	    height:260px;	    top:290px;	    position:relative;	    left:auto;	    right:0px;	    z-index:1;	    margin-left:auto;	    margin-right:0px;    }#pTitle1    {	    font-family:Times New Roman;	    font-size:24px;	    font-weight:bold;    }#pArticle1    {	    font-family:Times New Roman;	    font-size:14px;	    font-weight:normal;    }

This did not work for unknown reasons so I tried forcing it using this code:

<!-- Page Size & Main Division --><div id="DivMain"><div id="bv_Text1" style="margin:0;padding:0;position:relative;left:25;top:27px;width:260px;height:320px;text-align:left;z-index:0;"><font style="font-size:14px" color="#000000" face="Times New Roman"></font>Hello</div><div id="bv_Image1" style="margin:0;padding:0;position:relative;left:auto;right:0px;top:5px;width:260px;height:260px;text-align:left;z-index:1;"><img src="images/coins.png" id="Image1" alt="" align="top" border="0" style="width:260px;height:260px;"></div></div>

I'd really like this to work via CSS but its really wanting to fight me for some reason. thansk for help in advance.

Link to comment
Share on other sites

You can do it a number of ways. Conside these codes: First one using floating:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>HTML Template</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <script type="text/javascript" src="jquery-1.8.3.js"></script><style type="text/css">#main{    background: #0000ff;    width: 80%;    margin: auto;    padding: 1%;    height: 400px;}#leftdiv{    width: 45%;    background: #ff0000;    height: 400px;    float: left;    }#rightdiv{    width: 45%;    background: #00ff00;    height: 400px;    float: right;    }</style><script></script></head><body><div id="main">    <div id="leftdiv">Left div</div>    <div id="rightdiv">Right div</div></div></body></html>

Second one using display:inline-block

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>HTML Template</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <script type="text/javascript" src="jquery-1.8.3.js"></script><style type="text/css">#main{    background: #0000ff;    width: 80%;    margin: auto;    padding: 1%;}#main > div{    width: 45%;    background: #ff0000;    height: 400px;    display: inline-block;    margin: 1%;    }</style><script></script></head><body><div id="main">    <div>Left div</div>    <div>Right div</div></div></body></html>

Does this help at all. Of course you can see both concepts. You give <div>'s a style of display: inline-block to make them appear inline, but to also make them keep their appearance. The div is a block level element. Regards, Lab.

Link to comment
Share on other sites

You should very rarely use position: relative; for a design layout, it is usually used along with position: absolute; child elements within it, for placing of these elements relative to the boundary of the parent element..Also using top:, left: properties etc and z-index:, won't do anything unless any of the position: relative;, position: absolute; etc is defined first. What you should use is float:, margins, and padding, and only use positioning as a last option (usually reserved for overlapping of images, and sometimes some container elements when required). font tag is deprecated, you should apply styling to <p> or any of the header tags <h#> (where # = 1 to 6). display: inline-block; has a nasty habit of adding space between each element, which is usually caused when your html is

<div id="div1">div no1</div><div id="div2">div no2</div><div id="div3">div no3</div>

instead of

<div id="div1">div no1</div><div id="div2">div no2</div><div id="div3">div no3</div>

It reads each newline as a space, which is the size of the current font-size defined to the parent element these are contained in.

  • Like 1
Link to comment
Share on other sites

That is like asking 'how long is a piece of string', this depends on what design you require, fixed, fliud, one, two, three columns or more, sticky footer, fixed header, horizontal or vertical navagation, will require different methods to achieve the design you require.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...