The problem should be able to be seen live at this link (on every page, as the main content of the page is contained by my "content" div): http://tucsonbagley.com/index.html
The "content" class (a container div) has a much larger margin on the left than on the right and, after going over my CSS ad nauseum, I just cannot figure out why. I've broken something for sure (it was working not long ago!), but I just can't figure out what.
If I remove my id Navbar or id Header divs, the Content div will default back to the left... yeah, at this point I'm lost.
The CSS in question:
.content{
display:inline-block;
margin:0 auto;
width: 68%;
overflow:hidden;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
font-size: 12px;
border-radius: 10px 10px 10px 10px;
}
Example HTML:
<body>
<div class="header">
<p>Tucson Bagley</p>
</div>
<div id="socialmedia">
<img src="images/Twitter_logo_blue.png"/>
<img src="images/linkedin.png"/>
<img src="images/facebook.png"/>
</div>
<div id="header">
<small>BagelHero#gmail.com</small>
</div>
<div id="navbar">
<ul>
<li><span>Gallery</span></li>
<li><span>Resume/CV</span></li>
<li><span>Contact me</span></li>
</ul>
</div>
<div class="content">
<div class="thumbleft"><h2>This is some content.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non varius metus. Pellentesque eu nunc tortor. Aliquam id lectus orci. Sed id consectetur eros. Curabitur semper nisl nibh, rhoncus lacinia nibh volutpat at. Pellentesque sollicitudin vitae ipsum ut dictum. Proin ac risus ac nisi interdum hendrerit. Pellentesque sodales mauris ac eleifend vehicula. Nulla convallis aliquet urna varius auctor. Donec eget ipsum ut mauris consequat auctor eget sit amet odio. Nullam sed lorem erat. Praesent consequat porttitor magna, sit amet feugiat odio tincidunt ut. Fusce congue eros vel quam condimentum, vel consectetur quam imperdiet. </p>
</div>
</br>
<div id="copyright">
<p>Copyright 2012-2014 | Tucson Bagley</p>
</div>
</body>
Some help would be appreciated. Thanks in advance!
Add a <div style="clear:both"></div> before .content div and apply display:block to .content instead of display:inline-block and that's it
change the css of your .content to look like this
.content{
position: absolute;
left:0px;
right:0px;
display:inline-block;
margin:10px auto;
width: 68%;
overflow:hidden;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
font-size: 12px;
border-radius: 10px 10px 10px 10px;
}
the magic is the left:0px combined with right:0px and margin:10px auto which will only work in absolute mode.
Edit - updated css as per comments.
Related
So basically I am trying to make a page with 2 responsive columns, the same size side by side and instead of using px for measurement I'm sizing them using percentage. No matter what I do, setting both divs to have a margin of 5% and width of 40% they should sit side by side in a container with 'display: inline-block'. But for some reason it's not.
Here's the J-Fiddle demonstrating my issue. I have content above and below these divs on the page I'm working on... so they can't interfere with that, using, declaring float positions just seems to complicate things further.
http://jsfiddle.net/avh9s6pa/
If you guys could help I'd really appreciate it. It'll be something simple no doubt, but it's driving me nuts.
.post-reg-columns {
width: 100%;
display:block;
}
.firstcolumn {
display: inline-block;
max-width: 40%;
margin:5%;
padding:10px;
}
.firstcolumn button {
color: #fff;
background-color: #6496c8;
text-shadow: -1px 1px #417cb9;
border: none;
font-size: 1.4em;
font-family: 'Bree Serif', serif;
font-weight:bold;
width: 100%;
padding:15px;
}
.firstcolumn button:hover {
background-color: #416386;
}
.secondcolumn {
display: inline-block;
background:#fff7ca;
max-width: 40%;
margin:5%;
padding:10px;
}
<div class="post-reg-columns">
<div class="firstcolumn">
<div class="title2"> Basic Listing </div>
<button>Test Button</button>
ewfwefw efwefwefw fwefwef wefwefwef wefwefwe fwefwef wefefw efwe fefwefwefw eiofj erio jweriojgjphi owriog jerioj gerijg ejfwefwef wefj weijfwe jfjiw efjwej wef weijf hello this is a test blah blah blah! My name is Chris Mayberry and this is a test
</div>
<div class="secondcolumn">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod sollicitudin magna, sed placerat dui pretium quis. Vivamus sit amet velit nisi. Etiam consectetur mauris ligula, id fermentum felis fermentum ac. Phasellus pharetra a lorem ac dictum. Nullam vitae tempor ex. Mauris in vehicula augue. Maecenas sit amet porttitor enim, eu vehicula orci. Aliquam id nisl non sem mattis varius in sed nulla. Nulla ultrices fringilla erat, vitae tincidunt turpis malesuada vitae. Cras vehicula ex at arcu eleifend cursus. Sed varius dignissim risus eu fringilla.
</div>
</div>
As per your code, both divs have 40% width which means total 80%. Further, 5% margin which mean 5*4 =20%. So total becomes 100% here. And in your second div it has also 5% margin which force it to break as (100%+20%) there is no more space. You need to remove margin:5%; from .firstcolumn.
Check this fiddel
Remove margin:5%; from .firstcolumn class.
Demo here
Update answer
.post-reg-columns {
width: 100%;
display:block;
margin:5%
}
Demo Here
I have this fixed right side bar layout working perfectly for me for a long time, it works in most of the browsers and devices too.
But the recent chrome update to 45 which happened few days ago, broke the layout by adding a horizontal scrollbar.
There are different ways to achieve the fixed right side bar layout, but this layout needs to extend the background color of main and side columns to the browser width extent with fixed max-width container(marked in red) and with shadow between columns.
And this below code was the best way I could achieve it.
Now all I need is no scrollbar in Chrome 45, I tried different ways to avoid it but none works. I know this wont be a easy fix, but any help on this would be appreciated.
http://jsfiddle.net/chetanjk/ptuxn2dq/
HTML
<div class="container" style="background:#000; color:#fff; text-align:center">
------page content max width for reference ----
</div>
<div class="page-cols">
<div class="container ">
<div class="cols-wrap">
<section class="main-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ipsum sapien, tincidunt ac augue sodales, consequat sodales elit. Nunc pharetra eget velit sed pharetra.
</section>
<aside class="aside-col">
<div class="pack">
Sed luctus nisl ut ipsum scelerisque semper. Nullam euismod eros vitae odio viverra tristique. Nam pulvinar massa at diam congue, vitae fringilla neque varius. In molestie quis neque luctus facilisis.
Vestibulum sit amet mi ut odio condimentum dictum vel a metus. Morbi ultrices enim ut accumsan lacinia. Praesent augue purus, bibendum in odio in, pharetra consectetur mi. Vivamus ac arcu dignissim, placerat ipsum eu, tempor magna. Integer nec ipsum dui. Quisque at diam est. Aliquam ut placerat ligula, eu venenatis turpis. Sed nec eros vel ante ornare eleifend. Suspendisse aliquam nulla consectetur tellus molestie efficitur.
</div>
</aside>
</div>
</div>
</div>
CSS
body{
font-family: arial;
font-size: 14px;
color: #333;
line-height: 1.5;
overflow-y: scroll;
margin:0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
.container:after,
.cols-wrap:after,
.page-cols:after{
clear: both;
content: "";
display:table;
}
.container{
margin: 0 auto;
max-width: 1200px;
min-width: 300px;
padding:0 10px;
position: relative;
}
.page-cols{
background-color: #999;
}
.cols-wrap{
width: 100%;
position: relative;
background-color: #ccc; /*this can be #fff too to match body bg*/
box-shadow: 10px 10px 10px -10px #000;
right: 320px;
}
.cols-wrap .main-col{
float: left;
left: 320px;
position: relative;
width: 100%;
padding-right: 340px;
}
.cols-wrap .aside-col{
float: right;
position: relative;
width: 320px;
margin-right: -320px;
padding-left: 20px
}
I'm in the process of doing a redesign of my site. Maybe someone could be so kind to shed some light on an issue I am having.
Below is a mock up of what I'm trying to do. I am using font awesome to create icons and would like to put a border round each icon.
I have tranlated the mock-up into the following HTML code
<div class="col-md-4">
<p class="servicesFont borderSer"></p>
</div>
<div class="col-md-4">
<p class="servicesFont borderSer"></p>
</div>
<div class="col-md-4">
<p class="servicesFont borderSer"></p>
</div>
And CSS
.servicesFont{
font-family: FontAwesome;
color: #3397d3;
font-size: 90px;
font-weight: 400;
display:inline-block;
}
.borderSer{
border-radius: 50%;
border-width: .25em;
border-color: #885fa8;
border-style: dashed;
display:inline-block;
}
With this code I am getting the following results;
I am not using the font awesome classes as I was having issues specifying sizes using that method. Maybe I should do it with the classes?
I would greatly appreciate it if someone could give me an idea on now to best implement that icons on the mock-up.
You really should use the classes for both accessibility reasons and SEO. If you place the character codes directly in your markup a screen reader will read out "&-#-x-f-1-0-8-;", which obviously will be confusing and non-sensical to someone who isn't sighted. Moreover, you have the character codes in your markup and wrapped in a p tag, so you're telling search engines that those codes are content.
Here's one way to correctly use the classes instead:
.services {
padding-top: 2em;
padding-bottom: 2em;
}
.services i, .services h4 {
text-align: center;
}
.fa.services-icon {
color: #3397d3;
height: 180px;
width: 180px;
font-size: 90px;
line-height: 180px;
margin: auto;
display: block;
}
.services-icon:after {
content:'';
position: absolute;
top: 0;
left: 0;
height: 180px;
width: 180px;
border-radius: 50%;
border-width: .25em;
border-color: #885fa8;
border-style: dashed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="row services">
<div class="col-sm-4">
<i class="fa fa-desktop services-icon"></i>
<h4>Web</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a nisi ac neque interdum pharetra sit amet in tortor. Curabitur sit amet nisi non felis sodales placerat non quis urna. Proin eget metus dui. Vestibulum finibus justo vel erat volutpat bibendum. Donec pretium tortor eget dui efficitur, in dapibus lorem lobortis.</p>
</div>
<div class="col-sm-4">
<i class="fa fa-newspaper-o services-icon"></i>
<h4>Print</h4>
<p>Curabitur aliquet lacus nec leo iaculis, in luctus velit finibus. Donec pharetra rutrum orci malesuada dapibus. Vivamus sit amet bibendum lectus. Nulla sagittis dolor quis odio suscipit, sed euismod lorem euismod. Donec dapibus vitae libero faucibus bibendum. Duis aliquet nisi a ligula hendrerit, a ullamcorper tellus tincidunt.</p>
</div>
<div class="col-sm-4">
<i class="fa fa-pencil services-icon"></i>
<h4>Branding</h4>
<p>Nam tempus luctus laoreet. Cras at massa sapien. Vivamus eu rhoncus sapien, ac molestie urna. Suspendisse malesuada ligula vitae augue sodales finibus. Vestibulum porttitor sed elit ac vestibulum. In feugiat ipsum sed elit consequat, id vehicula odio pellentesque. Proin sit amet dictum velit. Etiam sit amet lorem quis leo laoreet pellentesque.</p>
</div>
</div>
</div>
Thank you ckuijjer. Below is the result from adding a fixed with span element.
HTML
<span class="width borderSer">
<p class="servicesFont "></p>
</span>
CSS
.servicesFont{
font-family: FontAwesome;
color: #3397d3;
font-size: 90px;
font-weight: 400;
display:inline-block;
padding:20px;
}
.borderSer{
border-radius: 50%;
border-width: 25px;
border-color: #885fa8;
border-style: dashed;
display:inline-block;
text-align:center;
}
.width{
width:200px;
height:200px;
}
Result
If anyone could give me any suggestions on how to do this better it would be greatly appreciated.
Thanks
Since height and width of the icon are not of same pixel. You can get the border to not clearly circle. For that you can manage by:
1)Giving more padding to the parent element's left and right side if your icon has more height than width and vice versa.
2) Since you cannot apply height and width property to font icon you can make parent height and width equal like done in above answer.
I have a website where I am trying to have a series of blocks next to each other and below each other. Currently the blocks are inline, I'd like to stop that and have stacking blocks both next to each other and on top of each other.
The website and page in question: http://cityofguilds.com/profile.php
My CSS:
.profile_containers {
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-bottom: 5px;
width: 48%;
padding: 5px;
border: 1px solid #222;
}
And the HTML:
<div class="profile_containers">
<h2>User Info</h2>
Text Here
</div>
<div class="profile_containers">
<h2>About Me</h2>
Text Here
</div>
<div class="profile_containers">
<h2>Badges</h2>
Text Here
</div>
<div class="clear"></div>
Thanks guys
I would recommend having two eight columns next to each other..
HTML
<div class="container">
<div class="eight columns">
<div class="profile_containers">
<h2>User Info</h2>
<strong>Name:</strong> Ben<br>
<strong>Level:</strong> 1<br>
<strong>Gender:</strong> Male<br>
<strong>Country:</strong> United Kingdom<br>
<strong>Started Playing:</strong> 21st July 2013<br>
<strong>Interests:</strong> Programming, Magic: The Gathering and gaming.<br>
<strong>Guild:</strong> Shinkaku
</div>
<div class="profile_containers">
<h2>Badges</h2>
Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff...
</div>
</div>
<div class="eight columns">
<div class="profile_containers">
<h2>About Me</h2>
Maecenas tincidunt fermentum nisi, sed convallis sapien aliquet a. Proin venenatis pharetra nisi, sit amet ultricies nibh hendrerit in. Donec et metus augue. Praesent fringilla justo non eros accumsan, venenatis posuere justo aliquet. Nullam et tortor fermentum, sollicitudin augue eget, ornare augue. Sed interdum imperdiet ullamcorper. Proin nec mattis velit. Donec sed augue nec mauris commodo lacinia sit amet ac purus. Maecenas faucibus bibendum nisi sit amet fringilla. Donec vel urna nec massa molestie tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut at euismod neque. In venenatis, augue lobortis bibendum pretium, velit est ornare nunc, a blandit lectus velit eu tortor. Quisque consequat odio at arcu accumsan, vel dapibus ipsum aliquam.
</div>
</div>
</div>
CSS
.profile_containers {
margin-right: 5px;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #222;
}
getting them to fit and stack on one another snug is a little tricky to just do with CSS since your blocks are different sizes.
If you can set a height for your blocks thats fixed, then you can float them in css and they will automagically grid out for you.
so your css would look like this :
.profile_containers{
float:left;
margin: 0 5px 5px 0;
width:48%;
padding: 5px;
border: 1px solid #222;
/* consider adding box sizing to keep the integrity of your width because the padding will mess that up*/
box-sizing : border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
if this method will work but will break if the heights of your divs are different. The easiest way to get them snug as I have found is either to break them into separate columns and put your divs in columns ex
<div class="profile_container_column">
<div class="profile_container"></div>
<div class="profile_container"></div>
</div>
<div class="profile_container_column">
<div class="profile_container"></div>
<div class="profile_container"></div>
</div>
and use the css float:left on the columns.
Or use a javascript library like masonry to manage the positioning for you.
Im wanting the container (purple border) to grow in size alongside the main content so i can place a border around it so it looks like the sidebar (blue border) is full height.
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<footer id="footer">
<p></p>
</footer>
Above is the html, the following is the css
#container { /* purple border */
height: 250px;
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
ive set the height at 250px for the container so you can see it, ive tried setting it as 100% but just doesnt show anything im guessing this is cause theres no content in it but how could i make it so it acts like if what is inside the mainContent is its height.
adding overflow:hidden to container causes this
Put a float:left; on #container.
OR
Put overflow:hidden; on #container to clear the internal floats.
Example fiddle: http://jsfiddle.net/3jNTv/
Chris Coyier has written a great post about it here:
http://css-tricks.com/all-about-floats/
Try set the height to heigh: 100%;?
Try this one, see live example:
link
height: auto !important;
I have added a class floClear and add a div. it will work fine.
CSS
#container { /* purple border */
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
.floClear
{
clear:both;
}
HTML
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="floClear"></div>
</div>
<footer id="footer">
<p>Test</p>
</footer>