There is probably a simple answer, but I can't seem to figure it out.
Code:
<body>
<div class='left'>
</div>
<div class='right'>
</div>
</body>
I want .left to be width:100px and .right to be the remaining width of <body>, but for the life of me, I can't get it.
I have:
<style>
.left{
float:left;
width:100px;
}
body{
width:100%;
height:100%;
}
.right{
float:left;
width:85%;
}
</style>
But of course 85% won't fill <body>. Any suggestions? I know it's simple.
.right { margin: 0 0 0 100px; } /* remove the float and width */
This will not work if you have elements inside .right which clear, otherwise it will.
Related
In the page here: https://irfan.io
I have tried centring the smaller circles every-way I can think of and they either don't get centred or the centring is not responsive-- meaning it fails when the viewport is changed.
They are all of class .small and they are children of #main.
I have tried flexbox:
#main{
display:flex;
align-items:center;
justify-content:center;
}
.small{
display:flex;
}
I have tried giving wrapping the .small elements in a container and giving that a fixed width and centring with -0.5 of the width:
#smallContainer{
width:500px;
margin-left:-250px;
position:relative;
left:50%;
}
I also figured since they were inline-block elements I could use text-align:center; on the .small element, but that didn't work.
#small{
text-align:center;
}
I can't seem to figure out how to centre 3 small circles so that the middle one is in the vertical-middle like the bigger circle ( .big ), which I centred using the 2nd technique.
Does anyone have any ideas on how to do this?
You have a mistake. Your inline-block elements has a left of 50% (even you will center, there are a 50% more to the right).
You can solve like this:
#smallContainer { text-align: center; }
.small { left: 0; }
you can try this:
DEMO:
#main{
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.small{
display:flex;.
text-align:center;
display:inline-block;
width:100px;
height:100px;
border:1px solid black;
}
#smallContainer{
margin-left:0 auto;
position:relative;
}
<div id="main">
<div id="smallContainer">
<div class="small">
text
</div>
<div class="small">
text
</div>
<div class="small">
text
</div>
</div>
</div>
fiddle here
What i did is simple.. just make #main and #smallContainer position relative, remove the left and width from #smallContainer to make it expand only according to its children, then put margin:0 auto; to #smallContainer. This way even if the viewport change you're sure the .small div's are centered.
EDIT
I updated the fiddle, I just removed the display:inline-block; from .small in css.
Dont forget to mark this as answer if it gives you what you need my friend :)
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I am new to CSS and HTML, I have one problem with regard to height of floated elements:
when I set the height of the "content" div to anything more than or equal to the "main" div height, then the margin top of footer is showing correctly, but as soon as I change the height of content div to auto, margin top of footer is not working. I would really like to know is there any solution which makes the content height auto but respects the margin top of footer. Please help me. I've tried everything: clearfixes of every kind, overflow etc.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</div>
#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }
Use the overflow:hidden Property .
“overflow: hidden” is often used for the purpose of float containment.
It can do more special things, however: prevent an element's margins
from collapsing with its children and prevent an element from
extending “behind” an adjacent floated element.
Source: The magic of “overflow: hidden”
#content{
width:800px;
height:auto;
background:#999;
overflow:hidden;
}
see jsFiddle
Quick fix...here's a Fiddle
#container{width:800px;height:auto;background:#000;}
#header{position:relative;width:800px;height:80px;background:#333;}
#content{position:relative;width:800px;height:500px;background:#999;}
#main{position:relative;width:600px;height:800px;background:skyblue;float:right;margin-bottom: 10px;}
#sidebar{position:relative;width:200px;height:800px;background:silver;float:left;margin-bottom: 10px;}
#footer{position:relative;width:800px;height:80px;background:green;clear:both;}
The problem with your set-up is that when you set the height of #container to auto, its height is actually computed to zero. This is because #container contains purely floated elements, and they are ignored when computing the height of #container.
To fix this, add a clearfix inside #content but after any other content. For example:
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both }
You can see it working here: http://jsfiddle.net/Mzxjs/
I have an issue with my divs. I currently have four “divs” in html that look like below. What I want to do is have everything in my page inside the “page” div. Inside the “main” div I have the “content” and “side” div and both have the “float:left” property from CSS. What’s happing is that when I do this I lose the background of my “page” div which is white. How can I prevent this and create my content and side divs? I know this is easy but for some reason I’m not getting it right. Any help will be appreciated.
Thanks
<div id=”page”>
<div id=”container”>
</div>
<div id=”main”>
<div id=”content”>
</div>
<div id=”side”>
</div>
</div>
</div>
This is my CSS code
#page
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}
#side
{
width:250px;
margin:5px;
float:left;
}
The reason you lose the background of your div is because it only contains floating content, which causes it to have no height. Once something "clears" the floats, it will occupy space again. Try adding this after your main div (you can have the style in the style sheet instead):
<div style="clear: both;"></div>
You need to contain your floats. When you float an element, it takes it out of the document flow, so any parent container will just collapse if you don't tell it to contain the child floats.
To contain child floats, the easiest is to apply overflow: auto.
So try this:
#page {
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
overflow: auto;
}
What I believe is happening is when you assign something a float, its "height" doesn't truly get represented to its parent element. Your page div now thinks that it has a height of nothing because of the floating elements within. Add a <br style="clear:both;height:1px" /> after you "side" div. Adding this will "clear" the floated div so their height is not fully represented.
This may not be your case, however I ran into this issue a few times myself and this usually fixed it.
<html><head>
<style type="text/css">
#page
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}
#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>
<body>
<div id="page">
<div id="container">
</div>
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
</body>
</html>
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}