logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-02-2015, 06:16 PM   #1
RedFinch
 
Join Date: Dec 2014
Posts: 10
Default How can I get my two divs to go side-by-side if I lost the resize handles in Dreamweaver CC

Hi I'm using dreamweaver CC and have a container div with two other nested divs. I would like for them to be side-by-side. For some reason I don't have the resize handles in dreamweaver cc but I would still like to handle this issue with css. One of the divs is at the bottom left and the orther is at the bottom right. I've spent hours following examples from various forums and finally had to reach out to anyone that may be able to help me. My html and css code snippets are below.


<div id="container" class="fluid ">

<div id="box1" class="fluid ">This is the content for Layout Div Tag "box1"</div>
<div id="box2" class="fluid ">This is the content for Layout Div Tag "box2"</div>

</div>


#container{
display:inline-block;
text-align:left;
border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
background-color:#F1F879;


}
#box1{
width:40%;
height:100%;
background-color:#1FEC90;
display:inline-block;
float:right;
vertical-align:top;

}
#box2{
width:40%;
height:100%;
background-color:blue;
display:inline-block;
vertical-align:top;

}
RedFinch is offline   Reply With Quote
Old 02-03-2015, 02:58 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

make the container relatively positioned then its child divs absolutely positioned
Code:
<!DOCTYPE HTML>
<html>
<head>
<style> 
#container{
height:200px;
position: relative;
text-align:left;
border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
background-color:#F1F879;
}
#box1{
width:40%;
position:absolute; top:0; left:0;
background-color:#1FEC90;
display:inline-block;
float:left;
vertical-align:top;
}
#box2{
width:40%;
position:absolute; bottom:0; right:0;
background-color:blue;
display:inline-block;
float:right;
vertical-align:top;

}
</style>
</head>
<body>
<div id="container" class="fluid ">

<div id="box1" class="fluid ">This is the content for Layout Div Tag "box1"</div>
<div id="box2" class="fluid ">This is the content for Layout Div Tag "box2"</div>

</div>
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 02-04-2015, 07:57 PM   #3
RedFinch
 
Join Date: Dec 2014
Posts: 10
Default

Thanks for the help...that totally worked!
RedFinch is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:18 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com