I want my display to look like this.
But instead, it looks like this
My Code goes like this.
HTML
<body>
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</div>
</body>
CSS
body{
text-align:center
}
.top{
position:relative;
}
.left{
position:absolute;
width:50%;
}
.right{
position:absolute;
width:50%;
left:50%;
}
.bottom{
position:relative;
}
What necessary changes should I make in my code. I want to keep things dynamic and not specify the height of divs in pixels.
Don't. Positioning is unsuited to this type of layout.
Use the right tool for the job. Use flexbox to put the two elements side-by-side, and let normal flow handle the rest.
h1 {
text-align: center;
}
.top {
display: flex;
}
.top>div {
flex: 0 0 50%;
}
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</div>
Related
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height.
The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 100%.
<div id="wrapper">
<div id="first" class="row">
<div>
first
</div>
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="first" class="row">
<div>
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
#first
{
height:50px;
margin-bottom:5px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second > div{
height:100%;
border: 1px solid red;
overflow-y: auto;
}
It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/
Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table).
But resize it in firefox and it will have this unexpected behavior.
Maybe I'm wrong and I'm taking good part of a chrome's bug.
I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome.
Thanks.
I made it work on both firefox, chrome.
Don't use display: table for this, not necessary
You had the id "first" two times.
You don't need divs inside divs
Use 'calc' it's a life saver.
http://jsfiddle.net/foreyez/p3rcyofk/
<div id="wrapper">
<div id="first" class="row">
first
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="last" class="row">
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper
{
width:300px;
height:100%;
}
#first,#last
{
height:50px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second {
height:calc(100% - 100px);
border: 1px solid red;
overflow-y: auto;
}
I am learning to bear with me.
I want to have 3 separate blocks within a container, and through css have them inlined, for example
the html (rough idea)
<div class="content-container">
<div class="block1">
<img scr="blockimage1" />
</div>
<div class="block2">
<img scr="blockimage2" />
</div>
<div class="block3">
<img scr="blockimage3" />
</div>
</div>
the css (rough idea)
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block1
{
width:500px;
float:left;
}
.block2
{
width:500px;
float:center;
}
.block3
{
width:500px;
float:right;
}
What's happening to me is they are just all aligning vertically below each other. Not next to each other in a horizontal line. I've tried many things and the closest I got was making a grid system with bootstrap but I ran issues with that later on so I thought I'd try a new approach.
You need to clean your HTML, CSS and use a simple solution. View the result in full screen. Display the blocks in a line using display: inline-block
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block {
display: inline-block;
}
<div class="content-container">
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
</div>
I've had page layout made via an Html table in my home page.
the lay out was fine , though i was reading that tables are not the way to go (SEO and maybe not only that)
so i need to use divs, the layout is as follows
(i am in RTL Lang /style /direction)
My Question is
Could anyone Try and simplify how to or give an example for a lay out like that
and in more detailed explained :
i think "my life" was so simple, when i had to understand the structure of a table
so, for illustration purpose take this markup:
<table>
<tr> <td>1</td> <td>2</td> </tr>
<tr> <td>3</td> <td>4</td> </tr>
</table>
here you don't need to think much to analyze that this will be 2 by 2 table
but when it comes to divs i get no results laying them as i plan to
i would like to know how do i make that simple as it was with a table for me .
2 now that i am trying to achieve that layout via divs (no table involved )
and to make it work so that layout will be Cross Browser, meaning will look same
at least for the 3 main browsers IE8&9 / FF / Chrome (only my preference)
thanks in advance
I tried hard to make template like what you want.I hope you will like it.See my layout
by division tag.I am attaching a screen shot as well that is created on the base of
my div logic.I think it will be clear for you.
<div id="main" >
<div style="background-color:Blue; text-align:center; ">
Main banner
</div>
<div style="background-color:Green; text-align:center; " >
Top menu
</div>
<div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
Right side menu
</div>
<div style="background-color:Red; text-align:center; height:200px;" >
<div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
contend2
</div>
<div style="background-color:Lime; text-align:center;height:100px; ">
contend1
</div>
<div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
contend4
</div>
<div style="background-color:Orange; text-align:center;height:100px; ">
contend3
</div>
</div>
<div style="background-color:Silver; text-align:center; " >
Footer
</div>
</div>
**In case if you want external css then use**
<div id="main" >
<div id="mainbanner">
Main banner
</div>
<div id="topmenu" >
Top menu
</div>
<div id="rsm" >
Right side menu
</div>
<div id="maincontend" >
<div id="c2" >
contend2
</div>
<div id="c1">
contend1
</div>
<div id="c4">
contend4
</div>
<div id="c3">
contend3
</div>
</div>
<div id="footer">
Footer
</div>
</div>
**CSS................**
#Main
{
}
#mainbanner
{
background-color:Blue;
text-align:center;
}
#topmenu
{
background-color:Green;
text-align:center;
}
#rsm
{
background-color:Gray;
text-align:center;
width:300px;
float:right;
height:200px;
}
#maincontend
{
background-color:Red;
text-align:center;
height:200px;
}
#c2
{
background-color:Fuchsia;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c1
{
background-color:Lime;
text-align:center;
height:100px;
}
#c4
{
background-color:Aqua;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c3
{
background-color:Orange;
text-align:center;
height:100px;
}
#footer
{
background-color:Silver;
text-align:center;
}
You can't ask for complete layouts, but I wrote two tutorials that will definitely help you acquire the skill required to make them: How to Position in CSS and Create a Fixed ('Sticky') Footer with CSS.
Check this
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div>
<div id="navigation">
<p>This is the Menu</p>
</div>
<div id="leftcolumn">
<div class="row">
<div>1st block</div>
<div>2nd block</div>
</div>
<div class="row">
<div>3rd block</div>
<div>4th block</div>
</div>
</div>
<div id="rightcolumn">
sfsf
</div>
<div id="footer">
<p>This is the Footer</p>
</div>
</div>
DEMO
HTML-Cleaner has a nice feature to replace HTML tables with DIVs: http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/
Make sure you include the css code supplied.
I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.
Here is my HTML code
<body>
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
</body>
And here is my CSS part.
#contentLeft{
float:left;
width:300px;
After that, I have no idea what to do. Tried number of ways, it didn't work. Could you please help here?
It may help you:
HTML:
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
CSS:
#box1{
float:left;
widht:50%;
background:#FF0000;
}
#box2{
float:left;
width:50%;
background:#00FF00;
}
#box21{
float:left;
width:50%;
background:#0000FF;
}
#box22{
float:left;
width:50%;
background:#e4e4e4;
}
Just for your reminder, don't use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.
.box{
float:left;
width:50%;
}
OR the following code:
#box1, #box2, #box21, #box22{
float:left;
width:50%;
}
See the example : http://jsfiddle.net/N4hMw/2/