Two columns non overlapping div layout - html

It seems I can't really solve this problem after two whole days of research and various tests.
I need a div which contains two div standing side by side as two columns, like in the image.
http://i.gyazo.com/bbfdcf09a2178fc0e662c59fae995988.png
The first div (in white) must assume the right size to contain properly the two columns.
I tried basically two ways:
1) make the two columns to float:left and add a clear:both empty div. The problem is, when one column become taller then the first, it wraps around it.
The code is:
<div style="position:relative; background-color:#fff">
<div style="float:left; width:50px;">
this is the first column
</div>
<div style="float:left; font-family:trebuchet MS, sans-serif;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
<div style="clear:both;"></div></div>
2) make the two columns position:absolute and place them manually. It works, but I can't get the container to resize properly..

I don't know the context of this bit of code in relation to the rest of the code on your page, but can you make the outer div float? Because it contains two divs that do float but it itself does not, it collapses and its white background doesn't extend down to match the height of the divs within it. Having it float too means it does and you could also get rid of the <div style="clear: both;"></div> tag.
I've stripped out some of your code to leave just the crux of what I'm getting at:
<div style="float: left;">
<div style="float:left; width: 50px;">
this is the first column
</div>
<div style="float: left;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
</div>

Related

How to divide a webpage in different sections?

I have a web page which has length of 2000px, but I want to divide it into 4 different sections (ie. 500px each) so I can add different content there with different design. But I have no idea how to do it. I would like to give hyperlinks of them also.
Sounds like you need some fundamentals.
The structure of your page is HTML, while stylistic elements are dictated in CSS. So you'll want four logical divisions (a.k.a. <div></div>) inside of a containing <div></div>, like this:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
A div is something called a block level element, which will automatically expand to the full width (ie: 100%) of its container. You want the inner div elements to take of equal width, and since there's four of them you do some math.
100%/4 = the width you want each div to be.
<div>
<div style="width:25%;"></div>
<div style="width:25%;"></div>
<div style="width:25%;"></div>
<div style="width:25%;"></div>
</div>
You'll notice this doesn't work as expected since the div elements will be the width you want but only stack on top of each other. To get them next to each other, you can use display:inline-block; which changes the block level to something between block and inline.
<div>
<div style="width:25%; display:inline-block;"></div>
<div style="width:25%; display:inline-block;"></div>
<div style="width:25%; display:inline-block;"></div>
<div style="width:25%; display:inline-block;"></div>
</div>
This will be almost what you want, except you will notice some gaps between the div elements, which is actually white space being preserved in the HTML code (the line breaks between the <div></div>). There are several ways of getting rid of this. In my opinion, the easiest is to put a blank comment between the elements, like this:
<div>
<div style="width:25%; display:inline-block;"></div><!--
--><div style="width:25%; display:inline-block;"></div><!--
--><div style="width:25%; display:inline-block;"></div><!--
--><div style="width:25%; display:inline-block;"></div>
</div>
This is using CSS styles inside the HTML elements, but you should really put CSS in a stylesheet and reference it in the page.
a terrible answer is frames; a moderately bad answer is css divs
<div class="bottom">
<div id="area1" style="float: left; width: 25%;"></div>
<div id="area2" style="float: left; width: 25%;"></div>
<div id="area3" style="float: left; width: 25%;"></div>
<div id="area4" style="float: left; width: 25%;"></div>
</div>
now when you say hyperlinks.. do you mean as in you click the mini part of the page and it expands to that part of it? because you will probably have to do some jquery hack for it
$("#area1").click(function(){
$("#area1").css("width", "100%");
$("area2").css("width", "0%");
$("area3").css("width", "0%");
$("area4").css("width", "0%");
});
(the above should resize the clicked div for the quarter you clicked on to 100 while shrinking the others. you would then style the individual div in the css for it by id or class etc.
easy way for you to use bootstrap that provides already make columns and with responsive functionality.IF you don't want to use next option is we can use css or frames.like as above answer

Make table only full width - inline css?

I'd like to make my table go full width (prior to my table my content is restricted next to three blocks which I'm cool with).
The table appears after the words "A selection of awards won:"
You can see the page - here
Would this be possible with inline css?
Thanks,
Sam
The best solution is removing your table from the:
<div id="right">
And creating a new div bottom or something with 100% width under the div right/ div left.
<div id="bottom" style="width: 100%"><table>
This should fix your problem,
You can't go full width because your container .sub-content is not full width...
If you want to go full width you will have to put your table in another container that is at the same level as the .left and .right container but with full width.
Something like :
<div id="content-sub">
<div id="left">...</div>
<div id="right">...</div>
<div id="bottom">
<!-- Your table goes here -->
</div>
</div>
with :
#bottom{
display: block;
width:100%;
}
Simply copy your your table code out and place it just above this code
<br clear="all" />
<div id="footers">

not able to display large tree structure with divs

On a JSP page, we have displayed a tree like structure using nested divs.Width of each div is calculated at run time. Only width of "div1" is given at runtime and other div's width is calculated using this at run time.Here, I have set it to 200px.
<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto">
<div id="div2" style="background-color:yellow;height:200px;width:190px;">
<div id="div3" style="background-color:blue;height:180px;width:180px;"></div>
<div id="div4" style="background-color:red;height:180px;width:50px;"></div>
</div>
</div>
Now the issue is "div4" is not getting appended in the right of "div3". It is getting placed in next line. Because of that tree structure is getting disturbed. And if I increase the width of "div2" then it is placed in the right but then horizontal scroll bar is coming for all cases where it is not required.
I have noticed the behavior of div that it place text vertically rather than horizontally.
Any idea how can I make it work?
Is this what you had in mind? I created a jsfiddle: http://jsfiddle.net/r6sPY/
Div4 will never get appended to the right of div3 as long as the width of div2 will be smaller than the sum of div3 and div4. But then again, I am not sure if this is what you had in mind.
<div id="div1" style="background-color:#EEEEEE;height:200px;width:200px;float:left;overflow:auto">
<div id="div2" style="background-color:yellow;height:200px;width:190px;">
<div id="div3" style="background-color:blue;height:180px;width:130px;float:left;"></div>
<div id="div4" style="background-color:red;height:180px;width:50px;float:left;"></div>
</div>
</div>

Adding side by side divs confusion

I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:
http://www.comehike.com/hiking_dev.php
The code I added was something like this:
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
I added <strong> tags so you can spot it on the page better.
But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?
Is it better practice to wrap my 2 divs that I am trying to align, within another div?
After your two floating divs, add another empty div...
<div style="clear:both;"></div>
This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.
Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.
Surround those two divs in a parent div with overflow set to hidden.
<div style="overflow:hidden;">
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
</div>
An alternative (as others have pointed out) is to use a third element:
<div style="clear:both;"></div>
It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?
You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.
Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.
Edit: Because of padding, you can increase either of the divs by 150px and be fine.

how to place two divs besides each other

On a web page, I have two divs. I would like to place the second div just right to the other one so that they're in a line.
You can use the float CSS style. Set it to left for the first div. The second div will be placed just right of it (so long as there is enough space)
<div>
<div style="float: left">
<p> This div will be on the left</p>
</div>
<div >
<p> This div will be on the right</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
Note, that sometimes it may be necessary to give the floating divs a fixed width in order to achieve the proper horizontal layout.
<div>
<div style="width: 100px; float: left">
<p> 100px div will be on the left</p>
</div>
<div style="width: 200px">
<p> 200px div will be on the right as long as there is enough
horizontal space in the container div
</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"><!-- usually leave this empty --></div>
</div>
You can also float:right; in order to make the divs align on the right side of the page. The clear is VERY IMPORTANT. In IE a lot of the time the float left/right rule is propagated to other elements to elements you did NOT intend to float. Usually though; you don't pick up on this right away and it becomes a nightmare to figure out why your page looks like crap down the road. So just make a habit of putting an empty clear div as the last sibling of any divs you decide to float.
Most simple way is CSS float:
<div id="div1">hello</div>
<div id="div2">world</div>
And the CSS:
#div1 {float: left;}
#div2 {float: left; margin-left: 10px;}
Simple test case.
After the floating divs add another one to clear the float so that further contents will be displayed fine:
<div style="clear: both;"></div>
float is a quick way, inline-block is another quick way and has some advantages over float such as not needing a clear:both element.
here's an example with both methods http://jsfiddle.net/dGKHp/
HTML:
<div id="floatExample">
<div>Float Left</div>
<div>Float Right</div>
<br />
</div>
<div id="inlineBlockExample">
<div>Left</div><div>Right</div>
</div>
CSS:
#container {width:600px;margin:0 auto;}
#floatExample div {float:left;background-color:#f00;width:50%;}
#floatExample br {clear:both;}
#inlineBlockExample div {display:inline-block;width:50%;background-color:#ff0;}
This is a pretty good write-up on ins and outs of inline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/