Positioning issues

[stu0]

Okay I'm pretty new to the whole web stuff as I've only been learning HTML/css in web development at college since September and haven't come across alot of how to deal with this stuff and what not so here is my issue.I want to have 2 separate divs side by side and move together when I scale up browser and stay next to each other when I scale down and I'm lost on how to go about this.I'm also confused as to how to position elements properly say I want to move things left or right and which positioning is best for example in the image I want the main content box further left but not sure which option is best.Hopefully this image helpsHTML

<div id="main"></div><div id="main-right"></div>>

CSS

#main{background-image:url('images/index_05.png');width:928px;height:510px;margin-left:auto;margin-right:auto;margin-top:10px;overflow:auto}#main-right{float:right;background-image:url('images/index_07.png');width:273px;height:588px;margin-left:auto;margin-right:auto;overflow:auto}

Thanks

[abdelelbouhy]

Okay I'm pretty new to the whole web stuff as I've only been learning HTML/css in web development at college since September and haven't come across alot of how to deal with this stuff and what not so here is my issue.I want to have 2 separate divs side by side and move together when I scale up browser and stay next to each other when I scale down and I'm lost on how to go about this.I'm also confused as to how to position elements properly say I want to move things left or right and which positioning is best for example in the image I want the main content box further left but not sure which option is best.Hopefully this image helpsHTML

<div id="main"></div><div id="main-right"></div>>

CSS

#main{background-image:url('images/index_05.png');width:928px;height:510px;margin-left:auto;margin-right:auto;margin-top:10px;overflow:auto}#main-right{float:right;background-image:url('images/index_07.png');width:273px;height:588px;margin-left:auto;margin-right:auto;overflow:auto}

Thanks

there are different ways to position elements 1-absolute position 2-reative position and using float in your code for example you can set the #main{float:left} that will cause the following elemnt to set next to it or you can use #main{position:absolute; top:10px for example; left:10px;} and position the next element the same way or you can set position:relative; and that will position the elements relatively to its original position there are also fixed position and static position wich is the default you can read about i herehttp://www.w3schools.com/css/css_positioning.aspgood luck

[thescientist]

well, there appear to be a few things you are asking for, so the overall question to me seems a little unclear. It seems like you want the gray box and the white box next to each other, like a left hand menu and a right hand content? For that it's as simple as using float, and a left margin, wrapping everything in a container.

HTML<div id="wrapper">  <div id="sidebar">	<p>Sidebar</p>  </div>  <div id="content">	<p>Content</p>  </div></div>CSS#wrapper{  width: 70%;  margin: 0px auto;  overflow: auto;}#sidebar{  float: left;  width: 15%;}#content{  margin-left: 15%;  width: 55%;}

The second thing appears to be that as the user scrolls up and down the page, the content should move with it, as if were fixed, and in essence the background itself appear to be scrolling? Then you might might want to try experimenting with position: fixed on the wrapper, I believe.

[stu0]

Hey all thanks for the reply's@Thescientist what I need is the brown box to be on the right hand side of the white box as the white and grey box are all 1 this also accounts for the scroll bar because the brown box is nudged down a line hopefully this makes abit more sense ;pHopefully this helps here is the layout idea.Thanks for the positioning when I used relative I'm still left this gaps from where it previously was sometimes which kinda bums me out but its works I think I'll have to experiment more with different positioning ALSO when I use float left on the #main when I resize my browser it doesn't move it just sticks there but might fix once I put in positioning stuff thanks again

[thescientist]

can you show us the most recently updated code or a link? I'm confused by your posts. There was no brown box in your first post image, and the arrow indicated the gray box needed to be moved outside the white box. Please stick with one concept at a time when asking questions, as the nature of the thread keeps evolving as more people try to help, making it more confusing to figure out what you're trying to accomplish.Based on the latest picture though, it appears it would probably be best to put everything in a container first. From there I would make a left column, and a right column. The left column should be some sort of fixed width with just enough room on the right for the brown box, and should contain the white box, and then the three brown boxes, as divs, floated left or as display:inline in order to get them to all fit on the same line. The right column would obviously be for your tall brown box, floated right. The gray box can be integrated once your basic layout is defined. All of this so far should be possible without the use of positioning, aside from standard box model positioning techniques.

[stu0]

The brown box is in the firt image :S sorry if the arrows where misleading I should have explained it better. Okay so I took your advise&code scientist and it looks like it's working thanks so much! here is the code + imageHTML

<body><div id="wrapper"><div id="header"></div><div id="content"></div>		<div id="sidebar"></div><div id="footer"></div></div></body>

#wrapper {margin: 0px auto;width: 1221px;overflow:auto;}#header {}#sidebar { position:relative;margin: 0;float: left;width: 273px;height:588px;background: url("images/index_07.png");left:20px;}#content {float: left;width: 928px;height:510px;background: url("images/index_05.png");background-repeat:no;}#footer {}

Thanks for the help everyone