My layout has a single column on the homepage that's centred in the middle of the page. The .posts class is contained in the .home class, which is contained in a .wrap class that has a max width of 800px. I wish to add a second narrow column or a side bar, for example of 120px, called the .sidebar class. If I set the .home class to have a maximum width of 600px and set the sidebar class to have a width of 120, it's still getting pushed to the bottom of the page, not next to the .home class.
Here's a demo on jsfiddle with the html and css from jekyll included http://jsfiddle.net/mjmitche/V4F6H/
How can I get the sidebar column next to the .home class?
HTML
<div class="wrap">
<a class="site-title" href="#">My Jekyll Blog</a>
<nav class="site-nav">
<div class="trigger">
<a class="page-link" href="http:google.com">blah blah</a>
</div>
</nav>
</div>
</header>
<div class="page-content">
<div class="wrap">
<div class="home">
<ul class="posts">
<li>
<a class="post-link" href="#">This is a link to my post</a>
<p></p>
</li>
</ul>
</div>
<div class="side-bar">
</div>
</div>
</div>
key CSS
.wrap:before,
.wrap:after { content:""; display:table; }
.wrap:after { clear: both; }
.wrap {
max-width: 800px;
padding: 0 30px;
margin: 0 auto;
zoom: 1;
}
.page-content {
padding: 30px 0;
background-color: #fff;
}
.home h1 { margin-bottom: 25px;
}
.home { max-width: 600px};
.sidebar{ width: 100px;}
Float the .home div to the left and the .sidebar to the right.
Unfortunately, your JSfiddle does not seem to have the full HTML and there is way too much CSS for a reduced case so I cannot make a demo.
Related
I'm writing the CSS for my site. I have text that I am putting on top of my background image. My HTML and CSS is below:
HTML
<header class="site-header">
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
</div>
<div class="site-header__menu-content">
<div class="site-header__btn-container">
Request A Demo
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
<li>Home</li>
<li>Services</li>
<li>Why Us</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="section">
<picture>
<img src="assets\images\pepper.jpg">
</picture>
<div>
<div class="section__text-content">
<h1 class="section__title">Company</h1>
<h3 class="section__sub-title">Company Slogan</h3>
<div class="btn-container">
<a class="btn" href="#">Talk To A Specialist</a>
<a class ="btn btn__white btn__pepper-white" href="#">Get A Quote</a>
</div>
</div>
</div>
</div>
CSS
.section {
position: relative;
max-width: 100%;
&__text-content {
position: absolute;
top: 30%;
width: 100%;
margin-left:
}
&__title {
font-size: 7rem;
font-weight: 300;
color: #ffffff;
margin-bottom: 0;
}
&__sub-title {
font-size: 2.5rem;
font-weight: 300;
margin-top: 3%;
margin-bottom: 2%;
color: #ffffff;
}
}
The problem arises when I try to add a margin-left to the .section class in my CSS, because then a blank which space to the right of my screen appears with a horizontal scroll bar in direct proportion to the amount of margin I specified to move to the left.
I know that I could use a simple "background-image" for my css, but I'd prefer to do it this way for responsive imaging (it's how I learned to do it and I'm on a bit of a time crunch).
Any suggestions?
FIXED
My problem was I was writing my margin in relative terms by doing:
.section__text-content {
position: absolute;
margin-left: 10%
}
Which is wrong, because the &__text-content is set to position: absolute
Percentage is relative position, with an absolutely positioned image you need absolute margins (i.e. pixels)
I have a menu in the top of my website with this css:
.menu {
width: 100%;
display: block;
float: left;
}
inside of it, I have few divs:
.menu .menu-item {
position: relative;
width: 260px;
float: left;
height: 430px;
}
This is all good, but when I try to add a small div underneath the menu, with this HTML structure:
<div class="menu">
<div class="menu-item">
</div>
</div>
<div class="menu-bar">
</div>
and this css:
.menu-save {
position: relative;
display: block;
margin: 0 auto;
width: 100%
height: 20px;
}
With this CSS my expected output is that the menu-bar div goes underneath the whole menu, but what I'm currently getting is that menu-bar sits inside of menu, at the top of it. What CSS am I missing?
I think
use clear: both CSS property to avoid the floating problem
<div class="menu">
<div class="menu-item">
</div>
</div>
<div class="clear"></div>
<div class="menu-bar">
In Css add this one
.clear{
clear:both;
}
I have a webpage with an image and a section of text which I'm trying to stack in a vertical line. I figured adding display: block; to .about div would be the appropriate way of doing this. It gives me the vertical stack that I want, but impacts the overall layout of the page. At first I thought it was pulling the header section down the page, but when I inspected the page, it seems as if this command is actually shifting the entire body section down the page. Not sure what is causing this.
<body>
<header>
<a href="index.html" id="logo"> <h1>
<div id="header_title">
Name
</div></h1> </a>
<div id="header_border"></div>
<nav id="nav">
<ul>
<li>
<a href="index.html" class="selected" >About</a>
</li>
<li>
Resume
</li>
<li class="subNav">
<a>Portfolio</a>
<ul>
<li>
Writing Samples
</li>
<li>
Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="about_div">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
More Text
</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>
© 2016 My Name.
</p>
</div>
</body>
And CSS:
body {
font-family: 'Playfair Display', open sans;
position: relative;
height: 100%;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding-top: 18%;
}
.about_div {
display: block;
margin-top: 50px;
}
.about_div img {
margin-left: 125px;
}
.about_div h3 {
margin-top: 50px;
margin-right: 1%;
}
.about_div p {
margin-right: 1%;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
How header spacing should look (with inline-block)
How header spacing actually looks when applying display: block
Note that this isn't technically a problem with the header, but rather the entire body section is shifting downward in the second example.
Remove display:block from '.about_div' and add display:flex to '#wrapper'
I want to create a navbar with a logo in the center, and two navbar items (links) on either side, width equal spacing. I also need the logo to be lined up center with the navbar items.
Here's the code i have thus far. I'm using bootstrap.
HTML:
<div class="nav">
<div class="container">
<ul>
<li> Navbaritem1 </li>
<li> Navbaritem2 </li>
</ul>
<div class="logo">
<img src="Img/logo.png" class="img-responsive">
</div>
<ul>
<li> Navbaritem3 </li>
<li> Navbaritem4 </li>
</ul>
</div>
</div>
CSS:
.nav li {
display: inline;
margin-left:5%;
margin-right:5%;
}
.logo {
width: 100px;
display: inline-block;
height: auto;
}
.logo img {
float: none;
padding-top:10%;
}
ul {
display: inline;
text-align:center;
width:30%;
}
Did you try centering a div inside the container?
<div class="container">
<div class="center">
Centered content here
</div>
</div>
And the css:
.center {
display: table;
margin: 0 auto;
}
Also this post might've helped you with a quick search.
Basically there are two images that are supposed to be on the center of the page and when the page is made smaller those images need to stack vertically. Currently I can get them to scale vertically, but I don't know how to center them. If I use margins or padding they stay in their position when the page is shrunk and don't look very good. I need them to move towards the edge as the page is being shrunk and then stack once the width of the page is too small. I'm doing this so they display properly on mobile and smaller resolutions. Does anyone know the best way to do this?
Here is the html:
<body>
<div class="wrapper">
<div class="wordmark">
<a href="#">
<img src="........." />
</a>
</div>
</div>
<div class="logowrap">
<div class="row">
<ul class="thumbnails">
<div class="logo1">
<li class="span6 home-left">
<a href="#">
<img src="SDI-logo.png" alt="SDI-logo" />
</a>
</li>
</div>
<div class="logo2">
<li class="span6 home-right">
<a href="#">
<img src="Debate-Logo.png" alt="SDI-logo" />
</a>
</li>
</div>
</ul>
</div>
</div>
</body>
Here is the CSS:
.navbar {
background-color:#000;
}
.container{
background-color:transparent;
}
.wrapper {
background-color:#000;
}
.wordmark{
max-width:100%;
max-height:100%;
padding-left:15px;
}
.logo1{
float:left;
.logo2 {
float:inherit;
}
.logowrap{
}
I have changed your code a bit. Take a look here and see if that helps you (http://jsbin.com/UdODawI/1/)
.thumbnails {
width: 100%;
margin: 0 auto;
list-style-type: none;
}
.wrapper {
background-color:#000;
}
.logowrap {
margin: 0 auto;
text-align: center;
}
.logo1{
display: inline-block;
}
.logo2 {
display: inline-block;
}
try adding this css to your image
.thumbnails img {
max-width:100%;
height: auto;
}
this allows your images to resize according to its parent