CODEWITHSUNDEEP
htmlcss
Bhushan Lodha
Bhushan Lodha

Reputation: 6862

How to wrap one div id around another one?

How to wrap one div around another? I have following two div ids:

#course {
  width: 325px;
  padding-right: 25px;
  border-right: 1px solid #999;
  border-top: 1px solid #999;
}

#home-page-sign-up {
  width: 275px;
  #padding-left: 25px;
  float: right;
  margin: auto;
  #position: relative;
  display: block;
  clear: both;
}

I want #course to be on left and #home-page-sign-up on right just next to it. I do get block on left and right as assigned but one is below another, I want them to be side by side.

How can I achieve it?

Upvotes: 0

Views: 2283

Answers (4)

w3uiguru
w3uiguru

Reputation: 5895

see fiddle for code and demo

Fiddle: http://jsfiddle.net/t4LUF/3/

Demo: http://jsfiddle.net/t4LUF/3/embedded/result/

NOTE: For demo purpose i gave border to all div's you can change as per your need.

HTML:

<div id="big-container">big-container
    <div id="container">
        <div id="course">course Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        <div id="home-page-sign-up">home-page-sign-up </div>
    </div>
</div>

SS: http://img812.imageshack.us/img812/3783/divcontainersidebyside.jpg

Upvotes: 0

Derek
Derek

Reputation: 133

Try this:

#course{
width:325px;
float:left;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}

#home-page-sign-up {
width:275px;
#padding-left:25px;
float:left;
margin: auto; 
#position:relative;
}

Then, in your body tags, do:

<div id="course">Course Div Content here...</div>
<div id="home-page-sign-up">Home Sign-up Content here...</div>
<div style="clear: left;"></div>

That's one way...that hopefully works ;)

Upvotes: 2

Gatekeeper
Gatekeeper

Reputation: 1616

I dont know what you mean by "wrap around" but if you want the divs to be next to each other, put float: left; in both styles...

Upvotes: 0

Khan
Khan

Reputation: 18142

You will want to float both of them left:

#course{
    float:left;
    width:325px;
    padding-right:25px;
    border-right:1px solid #999;
    border-top:1px solid #999;
}

#home-page-sign-up {
    width:275px;
    #padding-left:25px;
    float:left;
    margin: auto; 
    #position:relative;
    display:block;
}

Just make sure #course falls first in the html

Upvotes: 2

Related Questions