I apologize, but unfortunately I couldn't find any answer.
I have this code:
#wrapper {
width: 844px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#posts {
width: 844px;
float: left;
}
.entry {
border: 1px solid black;
padding: 10px;
float: left;
width: 400px;
}
#sidebar {
position: fixed;
width: 250px;
height: 100%;
top: 0px;
right: 0px;
display: table; /* needs to center stuff vertically inside of the sidebar */
}
<body>
<div id='wrapper'>
<div id='posts'>
{block:Posts}
<div class='entry'>
<!-- Tumblr posts -->
</div>
{/block:Posts}
</div>
</div>
<div id='sidebar'>
<!-- Stuff in the sidebar -->
</div>
</body>
I want to keep my #posts centered in the area, where no sidebar is given. I mean #posts has to be centered in its own container. In the code I've shown it goes over the sidebar.
Your question is not so clear but i have coded as per my understanding check this link
HTML
<div id='wrapper'>
<div id='posts'>
{block:Posts}
<div class='entry'>
<!-- Tumblr posts -->
</div>
{/block:Posts}
</div>
<div id='sidebar'>
<!-- Stuff in the sidebar -->
</div>
</div>
CSS
#wrapper {
width: 600px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
float:center;
}
#posts {
width: 70%;
text-align:center;
background-color:yellow;
}
.entry {
border: 1px solid black;
padding: 10px;
/* float: center; */
width: 200px;
margin-left:auto;
margin-right:auto;
}
#sidebar {
position: fixed;
width: 30%;
background-color:cyan;
height: 100%;
top: 0px;
right: 0px;
display: table; /* needs to center stuff vertically inside of the sidebar */
}
Use width of the wrapper as per your need and rest will adjust automatically.
follow the link above to see the live example. I have used background colors to visualize the area properly, you may remove if you want.
Related
I am trying to split the screen horizontally into 3 equal pieces so I can place separate images into each piece. I have split the screen somewhat equally, but I am running into some issues with a white space and not being split equally.
Here is what I have:
HTML:
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Avatar woman">
</div>
</div>
<div class="split center">
<div class="centered">
<img src="img_avatar.png" alt="Avatar man">
</div>
</div>
<div class="split right">
<div class="centered">
<img src="golf_course.jpg" alt="Finished Terrain Golf Course">
</div>
</div>
CSS:
/* Split the screen into thirds*/
.split {
height: 100%;
width: 33.3333%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: #111;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
.center {
right:auto;
left:auto;
background-color:wheat;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
Image:
You can use flexbox:
.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 100%;
padding: 5px;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
You can use grid :
https://css-tricks.com/snippets/css/complete-guide-grid/
in grid you can divide your grid.
*doesn"t work with older browsers like ie11
First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
<div class="container">
<div class="leftpane">
<h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1></div>
</div>
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
I'm trying to add a sidebar with a fixed width. But the content div should be fluid.
Here is my code:
.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
}
.page-side {
float: right;
width: 200px;
background-color: green;
}
<div class="page-main">
<div class="page-content">
Content
</div>
<div class="page-side">
Sidebar
</div>
</div>
I hope someone can help.
Just move .page-side before .page-content in your html
.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
}
.page-side {
float: right;
width: 200px;
background-color: green;
}
<div class="page-main">
<div class="page-side">
Sidebar
</div>
<div class="page-content">
Content
</div>
</div>
1.you can use css expression
.page-content {width: calc(100% - 200px);float:left}
2.or you can set the sidebar to absolute,and add margin-right for page-content
.page-side {
width: 200px;
background-color: green;
position: absolute;
right: 20px;
top: 18px;
}
.page-content {
background-color: red;
width: auto;
overflow: hidden;
margin-right: 200px;
}
You can use negative margin.
HTML:
<div class="wrapper">
<div class="content">
</div><!-- .content -->
<div class="sidebar">
</div><!-- .sidebar -->
</div><!-- .wrapper -->
CSS:
.wrapper{
margin-right: 300px;
}
.content{
width: 100%;
float: left;
}
.sidebar{
float: right;
width: 300px;
margin-right: 300px;
}
full explanation and example for 2-3 columns layout:
https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/
not sure whether you want to your sidebar width to exact 200px you can assign width in percentage too... i hope this helps
<div class="page-main">
<div class="page-content">
Content
</div>
<div class="page-side">
Sidebar
</div>
</div>
.page-main{
padding: 10px;
height: auto;
overflow: hidden;
}
.page-content{
background-color: red;
width: auto;
overflow: hidden;
float:left;
width: 61%;
}
.page-side {
float: right;
width: 200px;
background-color: green;
}
OR check this out: https://jsfiddle.net/pjx6wqrw/3/
{edited to remove jsfiddle link from the code block}
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle
I have a basic site structure with a header, a footer and a content area.
Almost all of the solutions I could find to center the content of the page uses CSS absolute positioning, with setting the margins of the content div, and having it float in the center of the browser window.
However, this results in the content covering the header and/or the footer when the window's size is reduced.
Instead, I would like the page to scroll when it cannot fit into the window.
Here is a screenshot of the page:
The area with the red border should be vertically centered without covering any of the other elements.
Here is the HTML&CSS I'm using:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout Test</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header Content</div>
<div class="articleContainer">
<div class="articleLeft">
<div class="articleTitle">
<h1 class="articleTitle">Title</h1>
</div>
<div class="articleText">
<p>Lorem ipsum ...</p>
</div>
</div>
<div class="articleRight">
<div class="articleImage"></div>
</div>
<div class="stepper">Stepper</div>
</div>
<div class="push"></div>
</div>
<div class="footer">Footer Content</div>
</body>
</html>
CSS:
#charset "UTF-8";
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -48px;
}
.header {
text-align: center;
background-color: #7FF152;
height: 48px;
}
.articleContainer {
background-color: #CCFFFF;
margin-right: auto;
margin-left: auto;
width: 700px;
clear: both;
min-height: 240px;
position: relative;
border: medium solid #FF0000;
}
.articleLeft {
float: left;
height: 450px;
width: 330px;
}
.articleTitle {
text-align: center;
margin: 20px;
}
.articleText {
max-height: 350px;
overflow: auto;
}
.articleRight {
float: right;
height: 450px;
width: 330px;
background: url(articleImage.fw.png) no-repeat center center;
}
.stepper {
clear: both;
text-align: center;
background-color: #FFFF00;
}
.footer {
background-color: #CC6633;
text-align: center;
height: 48px;
}
.footer, .push {
height: 48px; /* .push must be the same height as .footer */
}
I have uploaded both to here: http://cl.ly/3f2o1v0U2c0k
This is the jsfiddle: http://jsfiddle.net/gudmN/1/
Thank you for the help.
1) add margin: 0 auto; height: auto; float: left to .articlecontainer.
2) Make the header and footer float: left; width: 100%; height: 48px