5 Replies - 9803 Views - Last Post: 07 November 2012 - 03:09 AM

#1 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

positioning divs with a responsive design

Posted 07 November 2012 - 01:56 AM

i am trying to recreate my already finished site (i guess it isnt so finished =p) to turn it into a responsive website starting from the ground up. I am trying to align two of my divs directly below my image. my image as you can see below is 100% of its actual size (1000px). I would like the top left of the left div to match up directly below the left corner of the div. i have tried nesting left/rightbar divs within the wrapper as you can see and set the width to 50% for each one. i assumed that this would cause them to resize according to the width of the picture since there was no width set for wrapper but instead it has taken up the entire width of the page. maybe im going about this the wrong way. any ideas? thanks.

html

<body>

<div id="wrapper">
<img src="topimg.jpg" class="center">

<div id="leftbar">
</div>

<div id="rightbar">
</div>

</div>

</body>




css

img.center 
{
display: block;
margin-left: auto;
margin-right: auto;
max-width:100%;
} 

#wrapper
{
width:1000px;
position:relative;
height:auto;
background:black;
}

#leftbar
{
float:left;
width:50%;
height:500px;
background:red;
}

#rightbar
{
float:left;
width:50%;
height:500px;
background:green;
}




Is This A Good Question/Topic? 0
  • +

Replies To: positioning divs with a responsive design

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: positioning divs with a responsive design

Posted 07 November 2012 - 02:33 AM

Hello,

I think I've got the grasp of what you are trying to achieve, take a look at the snippet of code below, it should give you some basic idea of how to achieve it. Each element it coloured differently so you can tell the difference.

<style>
	#container
	{
		width: 1000px;
		border: 1px solid black;
	}
	
	#top
	{
		width: 100%;
		background: red;
		height: 200px;
	}
	
	#left
	{
		float: left;
		width: 50%;
		background: green;
		height: 200px;
	}
	
	#right
	{
		width: 50%;
		float: right;
		background: purple;
		height: 200px;
	}
</style>

<div id="container">
	<div id="top"></div>
	<div id="left"></div>
	<div id="right"></div>
</div>

Was This Post Helpful? 0
  • +
  • -

#3 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: positioning divs with a responsive design

Posted 07 November 2012 - 02:55 AM

this is how i have my website already set up however i am trying to change it into a responsive website so when the browser width changes so does the divs. essentially all you did was change my #wrapper to a fixed width of 1000px wich works to align my divs correctly but does not allow the divs to resize as the browser is shrunk in width.

This post has been edited by Dormilich: 07 November 2012 - 03:00 AM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: positioning divs with a responsive design

Posted 07 November 2012 - 02:58 AM

I do apologise that i did not understand the true meaning behind your question, although it was worded a little poorly in my opinion.

All you need to do in that case is set #container to have a percentile width, such as 40% so it will always be 40% of it's parent container. As the two children DIV's have a percentile width they will also re-size accordingly as the parent shrinks/grows.

This post has been edited by Dormilich: 07 November 2012 - 03:00 AM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 1
  • +
  • -

#5 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: positioning divs with a responsive design

Posted 07 November 2012 - 03:06 AM

View PostKruithne, on 07 November 2012 - 02:58 AM, said:

I do apologise that i did not understand the true meaning behind your question, although it was worded a little poorly in my opinion.

All you need to do in that case is set #container to have a percentile width, such as 40% so it will always be 40% of it's parent container. As the two children DIV's have a percentile width they will also re-size accordingly as the parent shrinks/grows.


i apologize for not wording my question well enough. i did read through it again and realized it was very vague. mistake on my part. i did try changing it to a percentage at first with no luck however i did not realize that for some reason when i try and hit refresh it will not actually refresh my page. its just a file on my hard drive and not on a server. i closed out the page and opened it back up and it worked just like i wanted it to. thank you very much for your help =)
Was This Post Helpful? 0
  • +
  • -

#6 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: positioning divs with a responsive design

Posted 07 November 2012 - 03:09 AM

View Postdrodriguez, on 07 November 2012 - 10:06 AM, said:

i apologize for not wording my question well enough. i did read through it again and realized it was very vague. mistake on my part. i did try changing it to a percentage at first with no luck however i did not realize that for some reason when i try and hit refresh it will not actually refresh my page. its just a file on my hard drive and not on a server. i closed out the page and opened it back up and it worked just like i wanted it to. thank you very much for your help =)


Try using CTRL + F5 instead of just F5. Personally when I test locally I prefer to spin up a fresh environment on my VM server as I can arrange it to mimic how the live environment will treat said application. If you have enough computer resources spinning up a VM using VirtualBox or even just another computer is plenty good enough. It's not needed but I find it better than running from local.

Good luck with your project!
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1