Possible duplicate didn't help
I know there are many answers about this topic but neither of them helped me and I spent days on
this problem.
90% of the answers and books give this background trick which didn't help me.
My code - Plunker
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Right now my layout looks like this:
And I want it to look like this:
I followed this guide offered in the possible duplicate and it didn't help
I think this is because I'm using floats and fluid layout.
How can I extend the columns while keeping the fluid layout and the float positioning.
I've updated your code. Check out it on Plunker.
At first try to not use absolute or relative positions, if there is no need of them.
The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.
Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.
And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.
Try something like this:
FIDDLE
Markup:
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
CSS
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}
Related
I have a header as follow: logo + nav containing 4 links
I would like to arrange all this element next to each other at the top (that is working), but also to make them at equal distance of each other. The second part does not work, I don't manage to define the size of the a elements in % ...
I am using float:left to position all this element on top next to each other. I am using the css property width to make them occupy 20% each of the total top of the page.
<body>
<header>
<img src="mylogo.png" style="width:42px;height:42px">
<nav>
Welcome
About
Art Work
Events
</nav>
</header>
<h1>Title of the page</h1>
</body>
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
header {
width: 100%;
}
.logo {
float: left;
width: 20%;
}
nav {
float: left;
}
nav a {
width: 20%;
}
There is some space between the logo and the links, but the links does not arrange along the top at equal distance, they stay stuck to each other... I suppose it's because their width is relative to nav, which is not 100% as there is the logo. But I don't know how to define the size of these a elements relatively to the header that I fixed to be 100% of my page?
Here's my solution. I made some changes in your css and instead of float I used flex-box technique to align them. I made the header black to detect the header easily. You can change it in the css. Hope this solution will help you.
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
header {
height: 10vw;
line-height: 10vw;
width: 100%;
background-color: #000;
}
.logo img {
vertical-align: middle;
}
a {
display: inline-block;
height: inherit;
width: 20%;
text-align: center;
line-height: inherit;
vertical-align: bottom;
transition: all .33s ease-in-out;
}
a:hover {
background-color: white;
}
<body>
<header>
<img src="mylogo.png" style="width:42px;height:42px"><!-- -->Welcome<!-- -->About<!-- -->Art Work<!-- -->Events
</header>
<h1>Title of the page</h1>
</body>
I found out that the following CSS worked:
header {
width: 100%;
display: inline-block;
}
.logo {
float: left;
width: 20%;
}
header nav {
width: 80%;
float: left;
}
header nav a {
width: 20%;
float: left;
text-align: center;
}
I'm trying to figure out how to use CSS Sprites on a sprite image with 4 sprites.
I have code to show the first two sprites. I have trouble with writing code to show the last two sprites. I am also unable to show the third and 4th sprites by themselves.
This is the image:
How to show the last two?
How to show the 3rd and 4th sprite by themselves?
HTML
<div class="container">
<ul>
<li id="belt-1"></li>
<li id="belt-2"></li>
<li id="belt-3"></li>
<li id="belt-4"></li>
</ul>
</div>
CSS
.container {
position: relative;
width: 600px;
height: 600px;
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
}
.container ul li {
background-image: url(https://i.stack.imgur.com/SBxX4.png);
margin-bottom: 20px;
width: 150px;
height: 78px;
background-size: auto 286px;
background-position: 0 0;
}
.container ul li#belt-2 {
background-position-y: 210px;
}
.container ul li#belt-3 {
background-position-y: 123px;
height: 58px;
}
.container ul li#belt-4 {
background-position-y: 66px;
height: 58px;
}
Always Remember all images in CSS sprites, should have same canvas size
I create a basic example of CSS sprites, I hope this will help you.
Here's a very simple example with the last two images. I recommend you to play around in this fiddle with .block's width, height, and background-position. The last two numbers in the background property allows you to define how many images will appear.
.container {
position: relative;
width: 600px;
height: 600px;
}
.container .block {
background: url(https://i.stack.imgur.com/SBxX4.png) -85px -420px;
width: 310px;
height: 250px;
}
<div class="container">
<div class="block">
</div>
</div>
You can play around with it on JSFiddle
i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)
here is the codes:
<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
<div class="content-right">
<div class="r-cont">
<div class="r-cont-header"> header goes here </div>
<div class="r-cont-content"> <p>• There is a sample right content...</p></div>
</div>
</div>
<div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->
and here goes css codes:
.mbody {
clear: both;
width: 920px;
position: relative;
overflow: visible;
height: auto;
margin: 0px auto;
}
.mheader {
height: 163px;
width: 856px;
background-image: url(img/header.png);
padding: 32px;
}
.mmenu {
height: 40px;
width: 920px;
background-image: url(img/menu-bg.png);
}
.mcontent {
width: 880px;
overflow: visible;
padding: 20px;
height: auto;
background-color: #FFF;
clear: both;
}
.content-right {
width: 200px;
float: right;
}
.content {
margin-right: 220px;
}
.r-cont {
clear: both;
width: 200px;
}
.r-cont .r-cont-header {
background-image: url(img/menu-head.png);
height: 32px;
width: 168px;
line-height: 32px;
color: #FFF;
padding-left: 32px;
font-weight: bold;
font-size: 16px;
}
.r-cont .r-cont-content {
background-color: #F8AF6B;
font-size: 12px;
padding: 6px;
}
.mfooter {
height: 60px;
width: 920px;
background-color: #F58220;
background-image: url(img/footer-bg.png);
clear: both;
}
here we go...
if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...
my customers still use ie6, so i cannot any css effects and css3 codes...
thanks in advance...
.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content
I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.
If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.
.mcontent {overflow: hidden;}
Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.
I want a nice 2 column layout using CSS float's.
Column#1 160 px
Column#2 100% (i.e. the rest of the space).
I want to place the Col#2's div first, so my layout looks like:
<div id="header"></div>
<div id="content">
<div id="col2"></div>
<div id="col1"></div>
</div>
<div id="footer"></div>
What has to be get this effect?
Neither of the above will work.
div#col2 {
width: 160px;
float: left;
position: relative;
}
div#col1 {
width:100%;
margin-left: 160px;
}
That's assuming that Column 2 should appear as a left sidebar, with col 1 as the main content.
You should use the "float" CSS property for doing this. Check out for a simple implementation here. And you can find a bit more detailed article here
You have to use float:left on first column and float:right on the second column
I think you could do something like this.
div#col2 {
padding-left: 160px;
width: 100%;
}
div#col1 {
float: left;
width: 160px;
}
This relies on #col1 coming before #col2, which might make it unusable.
This will not, but relies on #col1 being the longer:
#content {
position: relative;
}
div#col2 {
width: 160px;
position: absolute;
}
div#col1 {
width: 100%;
margin-left: 160px;
}
This'll keep the footer in place.
div#footer {
clear: both;
}
Although the question is for years ago, I provide this useful answer for any future reference and similar cases.
Putting #col1 before #col2 in markup, you may float it to the right, in case you have LTR lauout (if you have an RTL layout then float to the left) and give the other col overflow: hidden.
Note that the parent ( #content ) should have the overflow: hidden too:
#content{
overflow: hidden;
padding: 20px 0;
height: 100px;
background-color: #cdeecd;
}
#content #col1{
float: right;
width: 160px;
height: 100px;
background-color: #eecdcd;
}
#content #col2{
height: 100px;
overflow: hidden;
background-color: #cdcdee;
}
<div id="content">
<div id="col1"></div>
<div id="col2"></div>
</div>