Hi all
How can I make the two text boxes be on the left hand side (one under the other) and the yellow div be on the right hand side next to it? Thank you Test page
I am not clear which is the “text box” … but I will assume the LI’s are not it. I would forget whatever it is you were doing on the test page and do this instead:
Boxes display under each other by default
HTML:
<div id="cont">
<div id="main">
<div class="c_box">Text box... put your content markup here</div>
<div class="c_box">Text box... put your content markup here</div>
</div>
<div id="side"> This would be the yellow one</div>
</div>
CSS:
#cont {overflow:hidden;}
#main {float:left; background: silver; width:80%}
#sec{ float:right; background:yellow; width:20%}
.c_box{ background:blue;}
Adjust the width to fit your needs, keep in mind any added padding and/or borders to #main and, #sec when calculating the width…
espero que te ayuda… ==:)
Apologies for lack of contact, thanks I’ll try it out
yup use “float” but don’t forget to “clear” it
Thanks will do, the thing is I’m working merging a wordpress theme so I get some strange css that I have to deal with, hence my weird code!
Hi
I’ve been able to clean up the code a lot, now I just need to put the red div on the right of the green div but at the moment the red div is dropping. I made the width of the green div 35% and the red div 65% but the green div is now larger than the red div. What should I do to move stop the red div dropping? Thank you
http://tinyurl.com/4xse3ma
You haven’t floated the parent you floated the inner element which means the red float will start underneath. You would need to float the parent width the correct width: e.g.
This parent would need the 35% width and float:left width not the child.
[B]<div class="art-PostContent" style="float:left;width:35%;height: 356px; position: relative; background: green;">[/B]
<!-- LEFTHAND SIDE LINKS -->
<div id="side" style="float: left;width:35%;"><!-- remove these inline styles -->
Or perhaps just move the red box inside the parent.
<div class="art-PostContent" style="height: 356px; position: relative; background: none repeat scroll 0% 0% green;">
<!-- LEFTHAND SIDE LINKS -->
<div id="side" style="float: left;width:35%;">
<div> Text
<ul>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
</ul>
</div>
<div> Text
<ul>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
<li class=""><a href="" title="">text</a></li>
</ul>
</div>
</div>
[B] <!-- RED BLOCK -->
<div style="background: url() no-repeat scroll 0% 0% red; width: 65%; height: 356px; padding-left: 0px; float: right;">
<P style="PADDING-LEFT: 65px; WIDTH: 730px; PADDING-TOP: 8px"> </P>
<P style="PADDING-LEFT: 20px; WIDTH: 730px"> </P>
</div>[/B]
</div>
</div>
</div>
</div>
<div class="art-Footer">
The whole red block has been move up by one div so that it inside the same parent as #side.
In a fixed pixel width layout don’t use 35% + 65% because that may get rounded up to be too big. You have a fixed pixel width so give them the exact width in pixels that they need.
You will seldom need height on content containers like that as you want the content to dictate the height. Also avoid inline styles like the plague even for demos because it is just too awkward to manage and makes debugging a nightmare.
Also that arrow in the middle of that page is a bit pointless as it doesn’t move with the layout. Set a stacking context (position:relative on a parent) and place it in relation to the centred layout and not the viewport.
That works great Paul, I don’t understand this part but I will investigate more about it. Thanks again
“Also that arrow in the middle of that page is a bit pointless as it doesn’t move with the layout. Set a stacking context (position:relative on a parent) and place it in relation to the centred layout and not the viewport.”
Just shout if you are still stuck and I will elaborate 
Shouting!!
I hear you
What’s the problem?
Thanks Paul it is “Set a stacking context (position:relative on a parent) and place it in relation to the centred layout and not the viewport” - how do I place it in relation to the centered layout and not the viewport?
Cheers
HI,
Here’s a basic demo that shows how to do this and should be self explanatory if you look at the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#outer {
position:relative;/* this will create a stacking context for the absolute child*/
width:940px;
margin:auto;
background:#fcf;
border:1px solid #000;
}
.abs {
position:absolute;
left:400px;
top:200px;
width:140px;
height:50px;
line-height:50px;
background:red;
text-align:center;
}
</style>
</head>
<body>
<div id="outer">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p class="abs">Absolute element</p>
</div>
</body>
</html>
The absolute element is placed absolutely but for the topleft corner of #outer and not the viewport. If #outer moves then the absolute element stays on track with it.
Thanks Paul I made a load of changes as I’m changing a worpdress page template. For some reason there are lots of <DIV class=cleared></DIV> which I am looking into getting rid of. The red div righthandcolumn is dropping (this is the right hand column where my sidebar is going) and not on the right hand side as it should be even when it is floated left (or right). Why is it dropping? Thank you
offending web page
It’s not dropping. It’s exactly where you placed it inside .art-Post-body. It is at the right of .art-Post-body as expected.
It (rightcolumn) has been set to 300px wide so I don’t see how you expected it to fit anyway as the room at the side is only about 200px wide.
There are about half a dozen missing closing divs in that page anyway so I suggest you get the code valid first before you start to place elements as you are placing them in the wrong position. Match all the elements up and add all the proper closing tags.
Use lower case for everything rather than unreadable large and small method you are using as it make the page look very messy and difficult to follow. Quote all your attributes and remove all the css to the head (and then to an external file) and don’t place styles tags in the body section.
Until you have valid code to work with we will not be able to help place these items as just one missing closing div can corrupt the whole page.
Hi Paul apologies about the crappy code has been sorted out now, got rid of all inline css, added in the extra divs, changed case. I also changed the width of the red righthandcolumn div. However, I can’t see how to change it from art-post-body because it is the last div before the footer?
I’ve moved the righthandcolumn div within the divs before one by one but I still can’t seem to move the div to the right of the page! I also commented out the clear div. Why so this not move to the right?! Thanks
Hi,
You still have the rightcolumn div inside .art-content. which means its trapped. You need to move it right outside of .art-content (which itself should be floated left) as you can only float whole columns and not just add one float at the end.
Art-content should contain all your leftside content so give it the correct width and then float it left. Then move rightcolumn outside of art-content and adjust the width that you have for #topselect as you have set that to 700px anyway which means you can’t fit a left column of 700px and a right column of 200px inside.
There is no real mystery except that you have intermingled the elements, given them heights when the content should dictate the height and have given them incorrect widths also.
I can’t offer an easy fix because the structure is all wrong so I suggest you write down the widths of the wrappers and check where they close and where they start and make sure that the two floated columns are separate fron each other. Make sure all the left content is inside the left div and that will allow the right float to move into place.
Use firebug in Firefox and you can easily see where the elements are placed and check their positions etc.
Perhaps it would be easier for you to strip the page down to the two columns only and then you can put the content back in after you have sorted that.
I’m also guessing that your footer should be below both columns and not inside the left columns as it is now either.
You should strip the code down to something like this:
.art-content{
width:700px;
float:left;
height:auto;
}
<div class=“art-contentlayout”>
<div class=“art-content”>
<p>left column</p>
<p>left column</p>
<p>left column</p>
</div>
<div id=“righthandcolumn”> <img alt=“” src=“tester5_files/9.png” width=“200” height=“104”> </div>
</div>
Remember to remove heights from elements that hold fluid text because that will break the layout if the text overflows.What I have is the navigation, an image in the next div and then what I want is two columns. I’ll get to work on it, Thanks Paul
Sorry, I couldn’t give specific code but as you are converting a wordpress template then specific code probably won’t be too much use to you anyway at this stage.
Just try and get the modules in the right position and with the right dimensions and then it should start working with a little bit of luck.