I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.
Related
I would like to split my div tag up in two. But I am not quite sure how to do it. It looks like this now:
And I would like that there is a header in the div tag with a color for a headline. It should look like this:
But how can I split up like that?
Best Regards Julie
HTML and CSS:
#container {
width: 100%;
}
body {
background-color:rgb(48,48,48);
}
.topbar {
width: 100%;
height: 50px;
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.latestnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.hotnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.coldnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.numberheader {
height 100px;
background-color: red;
position: absolute;
top: 80px;
left: 30px;
right: 0;
width: 100px;
height: 50px;
}
.content {
float: left;
height:50px;
width:700px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div id="container">
<div class="topbar">
<p>Topbar</p>
</div>
<div class="latestnumbers" id="show">
<div class="numberheader">
<p>Tal</p>
</div>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="hotnumbers">
<p>test</p>
</div>
<div class="coldnumbers">
<p>test</p>
</div>
</div>
</body>
</html>
EDITED:
I have just tried to position the div tag now, and it is position in the middle now. But the code for the position is pretty messy, isn't it?
Try this, I think this was what you meant right?
https://jsfiddle.net/54d4tbtc/
It didn't look that good because of the width's
.content {
float: left;
height: 50px;
width: 300px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
I would make two divs, and wrap one inside the other like this:
<div class="topbar"></div>
<div class="outer">
<div class="inner">
<p>words</p>
</div>
</div>
when combined with this type of CSS:
.inner{
width:100%;
height: 150px;
background-color: #FFECB3;
word-wrap: break-word;
text-align: center;
}
.inner p{
padding-top: 10px;
}
it should work fine. Not sure what .talraekkeheader does in your CSS, but if it was planned for this .inner div then you may not need it after doing this.
NB. I added the word-wrap styling to .inner to avoid the overflow of text that you put in the div. I added padding to the paragraph text within the element for aesthetics mainly, as you don't want text to close to the top of the div.
I've the below html code.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins">
<head>
<meta charset="utf-8" />
<style type="text/css">
.main {
width: 900px;
height: 320px;
border: 1px solid black;
position:relative;
}
.margins {
padding:10px 10px 10px 10px;
border: 1px solid black;
}
.top_H {
width: 720px;
height: 80px;
border: 1px solid black;
}
.mid {
display: inline-block;
clear: both;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid black;
}
.mid_L {
width: 200px;
height: 120px;
float: left;
margin-right:10px;
border: 1px solid black;
}
.mid_C {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
margin-right:10px;
}
.mid_R {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
}
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px;
border: 1px solid black;
}
.bot_L {
width: 450px;
height: 80px;
float:left;
border: 1px solid black;
}
.bot_R {
width: 200px;
height: 80px;
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="margins">
<div class="top_H"></div>
<div class="mid">
<div class="mid_L"></div>
<div class="mid_C"></div>
<div class="mid_R"></div>
</div>
<div class="bot">
<div class="bot_L"></div>
<div class="bot_R""></div>
</div>
</div>
</div>
</body>
</html>
here i am trying to create a container div(margins) inside the main div, with the gap of 10 px on each side, but when i view it in web browser it is overlapped. please let me know where am i going wrong.
Here is the fiddle.
Thanks
Offcourse it is overlapping. in your .main class you have set a height, and it's not high enough. also, if you want to be absolutely sure that nothing goes over your div, set an overflow in the css !
make height of main div auto :
.main {
width: 900px;
height: auto;
border: 1px solid black;
position:relative;
}
DEMO : http://jsfiddle.net/V9N3u/2/
Now define your .main min-height and remove height
as like this
.main {
height: 320px; // remove this
min-height: 320px; // add this
}
try this
min-height for .main class
.main {
width: 900px;
min-height: 320px;
border: 1px solid black;
position:relative;
}
The others are right about the height.
You may also want to remove the margin-bottom of .bot to get rid of the extra spacing (unless that's on purpose):
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px; //remove
border: 1px solid black;
}
And you also have one too many " in your html:
<body>
...
<div class="bot_R""></div>
I got a problem with HTML, the problem is footer overlay in main like this image
I want to create a left sidebar in main page, a header at a top, and a footer. Besides I used RenderBody() for main in my HTML:
<div class="left">
LEFT
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
<button style="margin-left: 25px; float:left">Slide Toggle</button>
</div>
Here my CSS:
#main
{
position: absolute;
left:178px; top:92px; right:0; bottom:0;
}
#left {
position:absolute;
float:left;
width: 178px;
min-height: 400px;
}
#footer
{
clear: both;
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
clear: both;
font-family: Constantia, Georgia, serif;
}
Any suggestions how to fix that problem.
Firstly, it should be div id="left" in your html since in your css "#left" not ".left".
Secondly, what lee8oi said is true.You can try his method.
Thirdly, you also can applying this method jsfiddle by adding a new div (set display:inline-block) to wrap #left and #main by set "#left" as float:left and "#main" as float:right.
.wrapper
{
display:inline-block;
}
#main
{
background-color:yellow;
float:right;
}
#left
{
float:left;
width: 178px;
background-color:blue;
}
Addition: I'm just putting background-color to make clearer to you where the div is. Good Luck!!.
Well one problem is that you can't 'position: absolute' and 'float: left' in the same element. They both position elements in different ways.
The answer to your question, I believe, would be CSS's 'display: inline-block'. Normally div's are not allowed to render side-by-side. Instead maybe you should try something like this:
<!doctype html>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<style>
div.inline
{
color: red;
display: inline-block
}
#main
{
border: 1px solid blue;
width: 100%;
height: auto;
}
#head {
height: 100px;
width: 100%;
border: 1px solid green;
}
#left {
width: 15%;
min-height: 400px;
border: 1px solid red;
}
#body {
width: 84%;
}
#footer
{
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
font-family: Constantia, Georgia, serif;
}
</style>
</head>
<body>
<div id="main">
<div id="head">
The header
</div>
<div id="left" class="left inline">
LEFT
</div>
<div id="body" class="inline">
#RenderBody()
</div>
<div id="footer">
built with <a target="_blank" href="http://asp.net/mvc"> ASP.NET MVC 4</a>
<button style="margin-left: 25px; float:left">Slide Toggle</button>
</div>
</div>
</body>
</html>
I have 3 divs inside a main div as marked up in the HTML /CSS code below, when the page renders, the second div is twice as large as the first and last. When the page renders, because the second div is twice the size of the first and last, this causes the last div to display below the second, leaving a gap inbetween. What I want is that the third div occupies that gap that:
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div class="box">
</div>
<div class="box2">
</div>
<div class="box">
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>
Can this be done with CSS or does anyone know a method to accomplish this with javascript? It will be helpful to figure this out.
Switch up your box2 to float right
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: right;
}
Tested and it works placing the 3rd box beneath the first
if you plan on including more elements in #splash you are after the jQuery plugin masonry
here is a soltion demo for the extension problem
http://jsfiddle.net/kxMYS/
$( function() {
$('#splash').masonry({
itemSelector: 'div'
});
});
however
if you only want a solution to you're exact given problem
just change your css for .box2 to float:left;
http://jsfiddle.net/kxMYS/1/
Wrap 1st and 3rd boxes in left-container and the big box in right-container
Try this instead: http://jsfiddle.net/wcQ3L/1/
<html>
<head>
<title>Liquid Divs</title>
<style>
#splash {
width: 600px;
margin: 1px;
border: solid 1px #ccc;
}
#left-container{
float: left;
}
.box {
width: 196px;
height: 196px;
margin: 1px;
border: solid 1px #ccc;
}
.box2 {
width: 392px;
height: 392px;
margin: 1px;
border: solid 1px #ccc;
float: left;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div id="splash">
<div id="left-container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="right-container">
<div class="box2">
</div>
</div>
<div class="clear-fix">
</div>
</div>
</body>
</html>
This is my code:
<html>
<head>
<style>
#wrap{
border: 1px solid black;
width: 500px;
height: 200px;
}
#wrap div{
border: 1px solid red;
width: 100px;
height: 150px;
float: left;
}
.item2{
float: right;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item1"></div>
<div class="item2"></div>
</div>
</body>
<html>
Why my div item 2 did not flow right?Anyone can help me with that?
Because of CSS precedence.
Change your selector to:
#wrap .item2{
float: right;
}
See Working Demo
You're seeing an issue with CSS specificity.
There's a great article here:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
However, try the following:
<style>
#wrap{
border: 1px solid black;
width: 500px;
height: 200px;
}
#wrap div{
border: 1px solid red;
width: 100px;
height: 150px;
float: left;
}
#wrap .item2{
float: right;
}
</style>
#wrap div.item2{float: right;}
DEMO
Try this:
.item2{
float: right !important;
}