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
Related
This question already has answers here:
How to make a stable two column layout in HTML/CSS
(6 answers)
Closed 4 months ago.
I'm trying to make a simple two-column layout in HTML/CSS; after consulting some resources, I'm still getting the two divs that should be side-by-side rendering as one below the other.
<div id="columns" style="width: 100%;">
<div id="left" style="float: left; width: 60%;">
<button id="testBtn">show</button>
<div id="output" style="white-space: pre-line">
Content goes here
</div>
<div>
<div id="right" style="float: left; width: 40%;">
<div id="input">
input displayed here
</div>
</div>
</div>
These are some of the links I've consulted:
Simple two column html layout without using tables
https://www.w3schools.com/howto/howto_css_two_columns.asp
I've tried several variations, but so far I'm not getting a two-column layout. When I set the "input" div to "float:right", it appeared indented to the right but was still below the "output" div instead of beside it. Am I missing something?
Your HTML is invalid. Instead of a closing </div> tag for #left, you have an opening <div> tag.
Try this:
<div id="left" style="float: left; width: 60%;">
/* content goes here... */
</div>
Here is a fiddle demonstrating the modified markup: https://jsfiddle.net/djc87tLc/
Add display:inline-block; box-sizing:border-box; in both the divs and it will work.
display:inline-block;
This will keep the elements inline and box-sizing:border-box; will keep the element's width to your defined width by including any padding or border inside it.
Hope this helps.
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>
I have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div
Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.
Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help
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.