is there any solution to make the first div with dynamic width?
Trick with overflow:hidden does not work, because i need it (div.first) in the first place:
<div id="wrapper"><div class="first></div><div class="second"></div><div>
What is the best solution that would work in older versions of IE?
Thank you for any help
you can use absolute positioning to do this
html:
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
</div>
css:
.wrapper {
width: 100%;
position: relative;
}
.one {
position: absolute;
left: 0;
right: 50px;
}
.two {
position: absolute;
right: 0;
width: 50px;
}
there are nicer ways when you don't have to support the old IEs :-)
What do you think about this solution?
body{margin:0px; padding:0px; border:0px;}
#right {
width: 150px;
height: 50px;
background-color: black;
float:right;
}
#right_absolute{
background-color: blue;
float:right;width: 150px;
height: 50px;
position:absolute;
top:0;
right:0;
bottom:0;
}
#left{
height: 50px;
background-color: red;
}
<div>
<div id="right"></div>
<div id="left"></div>
<div id="right_absolute"></div>
</div>
I need it for better SEO. I want div.left (content) as much as possible on top of the code. The right column is not so important for SEO...
Related
if I have two divs on my page. One has fixed positioning at the top of the page style="position:fixed; left:0; top:0;right:0;" and one has fixed positioning to the left of the page style="position:fixed; left:0; top:0;bottom:0;" is there any way to have the left div positioned so it's top edge lines up with the bottom edge of the top positioned div without hard coding margins or padding? By default there will be some partial overlap
Placing both the div in another container div and defining the position:fixed style to the container div would solve your issue.
<div style="position:fixed;top:0;left:0;right:0;">
<div>div 1</div>
<div>div 2</div>
</div>
Try this
.div0{
position: relative;
width: 600px;
height: 400px;
background: blue;
perspective: 100px;
}
.div1{
position:fixed; left:0; top:0;right:0;
width: 200px;
height: 200px;
background-color: red;
}
.div2{
position:fixed; left:200; bottom:0;
width: 200px;
height: 200px;
background-color: green;
}
<div class="div0">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
Try this, I think you want to do the same.
.parent{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.child1,.child2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.child1{
top: 0;
right: 0;
}
.child2{
bottom: 0;
width: 200px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If the top div has a defined height, you can simply take that value and use if for the left DIVs top setting:
.top,
.left {
position: fixed;
}
.top {
top: 0;
left: 0;
right: 0;
height: 100px;
background: red;
}
.left {
top: 100px;
bottom: 0;
left: 0;
width: 150px;
background: green;
}
<div class="top"></div>
<div class="left"></div>
Hello how can I set image after div with image that will suit to browser width. I have this
code but it doesn't work properly. I want to image looks like in this way I mean how to make this line between images.
.phone{
margin:0 auto;
background: url(images/umow1.png);
width:74px;
height:74px;
}
.phone:after{
content: url(images/kreska2.png);
position: relative;
top: 20px;
max-width:300px;
width:100%;
left: 72px;
}
.message{
margin:0 auto;
background: url(images/napisz1.png);
width:74px;
height:74px;
}
.location{
margin:0 auto;
background: url(images/odwiedz1.png);
width:74px;
height:74px;
}
You need to make use of z-index so you can overlap the line with your circles.
Here's my sample code, this would make it easier for you to understand the concept: http://jsfiddle.net/C2yW4/
CSS
#linear,
#circle-group {
position: absolute; /*we need a position so we can use z-index.*/
}
#linear {
top: 100px;
width: 350px;
z-index: 0; /*It means the layer is at the most bottom*/
}
#circle-group {
z-index: 1; /*This layer will be displayed upfront than the lower value*/
}
.circle {
background: #65CA22;
border-radius: 100px;
display: inline-block;
width: 100px;
height: 100px;
margin-right: 50px;
}
HTML
<div id="parent">
<div id="linear">
<hr />
</div>
<div id="circle-group">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
Make sure to apply absolute/fixed/relative position so z-index would work.
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}
How can I attain whats shown in the image without using tables? I want the layout to span the entire height/width of the page, even if the browser window is resized.
This is what I have tried so far. Its close, but doesn't look professional.
<html>
<body>
<div>
<div style="border-style: solid; height: 20%">
Header</div>
<div style="overflow: hidden; height: 55%">
<div style="border-style: solid; float: left; width: 20%; height: 100%;">
left</div>
<div style="border-style: solid; float: left; width: 57%; height: 100%;">
content</div>
<div style="border-style: solid; float: left; width: 20%; height: 100%;">
right</div>
</div>
<div style="border-style: solid; height: 20%">
Footer</div>
</div>
</body>
</html>
A clean and simple css would be greatly appreciated.
Foo, what you need to do is get a good foundation in HTML and CSS before attempting this. Ideally, you want to avoid inline styles (e.g. style="border: 1px solid black;"). You don't need fixed or absolute positioning to accomplish this. It's entirely doable with basic HTML/CSS know-how. Here is an alternative solution to what you're asking:
<div class="header">
<div class="header-inner"></div>
</div>
<div class="content">
<div class="sidebar left">
<div class="sidebar-inner"></div>
</div>
<div class="content-inner"></div>
<div class="sidebar right">
<div class="sidebar-inner"></div>
</div>
</div>
<div class="footer">
<div class="footer-inner"></div>
</div>
And the CSS:
/* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
position: relative; /* needed for stacking */
height: 100px;
width: 100%;
}
.content {
position: relative; /* needed for stacking */
width: 100%;
height: 500px;
}
.sidebar {
position: relative; /* needed for stacking */
width: 20%;
height: 100%;
border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
clear: both;
content: "\0020";
display: block;
overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
position: relative; /* needed for stacking */
width: 100%;
height: 100px;
}
Here is a demo. Take this demo and learn from it! Hope this helps!
Use the position: fixed (ALL) along with top: 0px; (top div) , right: 0px; (right div),
left: 0px; (left div), bottom: 0px; (bottom div)
Fixed Positions should help in your case
EDIT: here is the code working:
<div>
<div style="border-style: solid; height: 20%; position: fixed; top: 0px; width: 100%;">
Header
</div>
<div style="overflow: hidden; height: 55%">
<div style="border-style: solid; float: left; width: 20%; height: 60%; position: fixed; left: 0px; top: 20%;">
left
</div>
<div style="border-style: solid; float: left; width: 55%; height: 60%; position: fixed; top: 20%; left: 20%;">
content
</div>
<div style="border-style: solid; float: right; width: 20%; height: 60%; position: fixed; right: 0px; top: 20%;">
right
</div>
</div>
<div style="border-style: solid; height: 20%; position: fixed; bottom: 0px; width: 100%;">
Footer
</div>
</div>
css :
#header
{
position:fixed;
top:0px;
left:0px;
right:0px;
height:20%;
overflow:hidden;
}
#leftSide
{
position:fixed;
top:21%;
left:0px;
width:20%;
bottom:21%;
}
#rightSide
{
position:fixed;
top:21%;
right:0px;
width:20%;
bottom:21%;
}
#footer
{
position:fixed;
height:20%;
left:0px;
right:0px;
bottom:0px;
}
#content
{
position:fixed;
top:21%;
bottom:21%;
left:21%;
width:57%;
}
div {display:block; border:1px solid black;}
html :
<div id="header">header</div>
<div id="leftSide">left</div>
<div id="content">content</div>
<div id="rightSide">right</div>
<div id="footer">footer</div>
in this example I use fixed position, but you can set overflow-x and overflow-y for every of this div's.
for example: for content you can use overflow-x:hidden and overflow-y:auto or scroll and so on for every div.
of course, page will not be scrollable in this example.
I guess you already figured out a solution by now, as the question is nearly two years old. However, some other people might stumble upon this post, so this is for future reference:
Take a look at this answer and check the JSFiddles. It's a relatively solid solution using CSS tables (no HTML layout-tables).
Any idea how to make the middle sections in this code below (jsFiddle here) adjust to the height of the actual container without specifying fixed values or Javascript? In this fiddle I tried setting absolute and relative for the container but the page always shows vertical scrollbar as the height of the container exceeds the height of the actual page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { margin: 0; height:100%;}
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
This seems to do what you want:
http://jsfiddle.net/grc4/XTQuT/2/
Absolute positioning takes #middleContainer and #footerContainer out of the normal flow. #middleContainer is forced to take up the size of the whole page, but is given a margin to allow room for the header and footer. #footerContainer is fixed to the bottom of the page with bottom: 0. The left and right columns can then just use height: 100% to take up the right space, but the middle column still needs absolute positioning to force it to only use the remaining space.
................................
Hi maya i suggest u can u used table properites in your code if yes than check to this demo
HTML
<div class="wrap">
<div class="header">header</div>
<div class="conternt">
<div class="left">Left sdaf dsaklf jdslkaf jdlskfj dlskafj dslkf jdslkf jsdlakfj sdlakfj sdlkf jlsdkfj sladkfj sdalkfj sadlkf </div>
<div class="center">Center flexible</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
Css
.header{
background:green;
color:#fff;
padding:20px;
}
.conternt{
background:yellow;
display:table;
width:100%;
}
.left, .right, .center{
display:table-cell;
color:#fff;
}
.left, .right{
width:100px;
}
.left{
background:rgba(0,0,0,0.5)
}
.center{
background:rgba(0,0,0,0.1)
}
.right{
background:rgba(0,0,0,0.9)
}
.footer{
background:red;
color:#fff;
padding:20px;
}
live demo
Specify the height of both #footerContainer and #headerContainer as percentage instead of pixels, as you do the same for others div. In this fiddle I gave 10% to header and footer, and 80% to all intermediante divs.