pretty sure it has been answered somewhere but I couldn't find anything.
I'm trying to set up the blog post page and would like the content to be screen-centered with the sidebar to stick to the right. like below. Thanks for your help.
image of the layout I try to achieve
.main-div{
width: 100%;
border: 5px solid black;
justify-content: center;
padding: 1px;
}
.div-1{
margin: 0px auto 0px auto;
height: 1000px;
width: 300px;
border: 5px solid black;
}
.div-2{
position: fixed;
right:10px;
top:30px;
height: 200px;
width: 200px;
border: 5px solid black;
}
<div class="main-div">
main-div
<div class="div-1">div-1</div>
<div class="div-2">div-2</div>
</div>
Related
i am a beginner who wants to learn please help.here archenemies is the id i gave to div.
div {
height:100px;
width:100px;
display: inline-block;
margin-left: 5px;
border-radius:100%;
border: 2px solid black;
}
#archenemies{
border:4px solid #cc0000;
background-image:"http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png";
background-size:90%;
}
Method 1 - Using Background Image.
The things to keep in mind while creating a circular div-
1. border-radius:50% or more
2. Backgound-imgage- size to cover
3. background position to center
Below is the working code.
div {
height: 100px;
width: 100px;
display: inline-block;
margin-left: 5px;
border-radius: 50%;
border: 2px solid black;
border: 4px solid #cc0000;
background-image: url(http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png);
background-size: cover;
background-position: center center;
}
<div> </div>
Method 2 - Using IMG SRC
div {
width: 100px;
height: 100px
}
img {
border-radius: 50%;
width: 100%;
height: 100%;
border: 4px solid red
}
<div><img src="http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png" /></div>
Sory if I ignored your height and width settings!
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png') ;
background-size: 100px;
background-position:50%;
background-repeat:no-repeat;
<div class="circle"></div>
So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.
html
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
css
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
/----------------------------------------/
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.
I would alter your styling thusly:
#Container {
width: 96%;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
height: 15%; /* This should really be a static number, not a percentage*/
width: 100%;
border-bottom: 2px solid #e8e2e2;
margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
Try to add pading to header tag's self. Because it is relative to other containers.
#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
Firstly, please add #for Container as in #Container in css.
Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.
<html>
<head>
<style type="text/css">
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
border:1px solid red;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
<p>some text here</p>
</div>
</div>
</body>
</html>
Hope this helps.
Thanks
Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.
See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo
HTML
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
CSS
Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
/* height: 15%; */
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
padding-bottom: 20px;
/*background-color: red;*/
}
Just commenting out height: 15% for #Header solves the issue.
I'm trying to set a simple page grid. Each row consists of an optional left column, plus a main content right column. I want the right column to remain the same size at the same position even if the left column isn't present.
I figured that floating the left column and using position: relative with left: on the right column would give me the behaviour I want.
My HTML looks like this:
<div class="row">
<div class="sidebar">I'm a sidebar!</div>
<div class="main">
<p>I'm main!</p>
</div>
</div>
and my CSS looks like this:
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Here's a fiddle: http://jsfiddle.net/ttr5k/1/
To my surprise, the content of .main is shifted right (as if .main had padding-left) seemingly due to the sidebar. Why is this, and how could I solve it?
I also suspect this isn't the best way to build a grid, is there a better approach?
Add position absolute instead of relative
http://jsfiddle.net/ttr5k/2/
As you can see the text aligns left again
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}
I recommend doing something like this:
.row {
background:#eee;
width:90%;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:left
width: 500px;
border: 1px solid green;
overflow:auto;
clear:right;
}
Now you will be able to remove the sidebar whenever you want without adding new CSS
DEMO: http://jsfiddle.net/ttr5k/5/
OR------
if you want that space even if no sidebar and still want to content to overflow:
http://jsfiddle.net/ttr5k/7/
.row {
background:#eee;
width:600px;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:right;
width: 396px; /* This is due to box-model adding border as width */
border: 1px solid green;
overflow:auto;
clear:right;
}
Here is the FIDDLE on how I would do it: http://jsfiddle.net/mikea80/zJa5P/
<div class="row">
<div class="main">
<p>I'm main!</p>
</div>
<div class="sidebar"><p>I'm a sidebar!</p></div>
</div>
.row {
margin: 0 auto;
width:704px;
clear:both;
}
.main {
display:inline-block;
float:right;
width: 500px;
border: 1px solid green;
}
.sidebar {
display:inline-block;
float: right;
width: 200px;
border: 1px solid red;
}
With the row being 700px this code will center it
You have to add position absolute to sidebar class.
CSS:
.sidebar {
position: absolute;
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Trust me, this way, you can add other row class without any problem. Here is the FIDDLE:
http://jsfiddle.net/asubanovsky/bVr6r/
It's been while since I have done some css design work. I have a 3 column lower section marked up in my html like:
<section id="lowerContent">
<section id="lcLeft"></section>
<section id="lcMiddle"></section>
<section id="lcRight"></section>
</section>
I have my css for the sections like this:
section#lowerContent {
width: 958px;
border-left: 1px solid grey;
border-right: 1px solid grey;
height: 405px;
overflow:hidden;
}
section#lcLeft {
width: 216px;
float:left;
height: 100%;
border-right: 1px solid grey;
}
section#lcMiddle {
width: 428px;
float:left;
height: 100%;
border-left: 1px solid grey;
border-right: 1px solid grey;
margin-left: 5px;
}
section#lcRight {
width: 299px;
float: right;
height: 100%;
border-left: 1px solid grey;
margin-left: 5px;
}
If you add up the sections with margins and borders it is 957px so I have 1px to spare inside the lowerContent section. My problem is in IE8 and FF. When I do ctrl + or ctrl - the last div is pushed to the second line and not holding its position. It works correctly in chrome, opera, and safari. Can anyone tell me what I'm missing?
Thanks
My Solution:
First I changed the markup to the following:
<section id="lowerContent">
<section id="lcLeft">
<section id="lcLeftInner"></section>
</section>
<section id="lcMiddle">
<section id="lcMiddleInner"></section>
</section>
<section id="lcRight">
<section id="lcRightInner"></section>
</section>
</section>
The css works for all the major browsers and you can ctrl+ and ctrl - without the layout breaking.
section#lowerContent {
width: 960px;
height: 405px;
}
section#lcLeft {
width: 218px;
height: 100%;
}
section#lcLeftInner {
width: 216px;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
section#lcMiddle {
width: 442px;
height: 100%;
}
section#lcMiddleInner {
width: 430px;
border-left: 1px solid grey;
border-right: 1px solid grey;
margin-left: 5px;
margin-right: 5px;
}
section#lcRight {
width: 300px;
height: 100%;
}
section#lcRightInner {
width: 298px
border-left: 1px solid grey;
border-right: 1px solid grey;
}
Hope that helps someone.
It works correctly in IE8 and FF,too: that's what's supposed to happen when you float those things. When you control+ the page, the floated divs have no place to go but down. If you want them all to line up horizontally, you can give each a z-index; or you can put them in a table.
Try #lcMiddle place after #lcRight and set margin: 0 305px 0 222px and remove float.