CSS content overflowing containing div - html

Currently have a problem with some DIVs overlapping their containing DIVs. See image below (the 3 products at the bottom):
All the body content of the page is held within the #content DIV:
div#content {
width: 960px;
float: left;
background-image: url("../img/contentBg.png");
background-repeat: repeat;
margin-top: 10px;
line-height: 1.8em;
border-top: 8px solid #5E88A2;
padding: 10px 15px 10px 15px;
}
And here is the CSS for the product boxes within the #content div:
.upper {
text-transform: uppercase;
}
.center {
text-align: center;
}
div#products {
float: left;
width: 100%;
margin-bottom: 25px;
}
div.productContainer {
float: left;
width: 265px;
font-size: 1em;
margin-left: 50px;
height: 200px;
padding-top: 25px;
text-align: right;
}
div.product {
float: left;
width: 200px;
}
div.product p {
}
div.product a {
display: block;
}
div.product img {
float: left;
}
div.product img:hover {
opacity: 0.8;
filter: alpha(opacity = 80);
}
div.transparent {
opacity: 0.8;
filter: alpha(opacity = 80);
}
And here is the HTML for the boxes:
<div class="productContainer">
<div class="product">
<h2 class="upper center">A2 Print</h2>
<a href='../edit/?productId=5&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through Website." /></a>
<p class="upper">16.5 inches x 23.4 inches<br /><strong>£15.99</strong></p>
<p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span> </em></p>
<p><a href='../edit/?productId=5&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">A1 Print</h2>
<a href='../edit/?productId=11&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through Website." /></a>
<p class="upper">23.4 inches x 33.1 inches<br /><strong>£19.99</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=11&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">Poster Print (60cm x 80cm)</h2>
<a href='../edit/?productId=12&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through Website." /></a>
<p class="upper">23.6 inches x 31.5 inches<br /><strong>£13.95</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=12&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
Any idea what could be causing these DIVs to overlap? What I'd like is for all the boxes to fit within the #container div as expected. It's driving me crazy!
Cheers

Did you try to set to the footer
clear:both;
Also, set to the #content
overflow:hidden;

Add overflow: auto; in your content div CSS :)

Something a lot of people use is called clearfix. here is the code:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
To use this you just add the class clearfix to container. You will probably want to add it to whatever div is containing all the "productContainer"

Related

Keeping wrapper container a certain percentage of body

I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>

image size as per the div size in the app

I am working on a mobile app on phonegap.
I have a scenario where people will be attaching images and uploading images.
So whatever the div size is I want my image to take that much size regardless of it's original size.
Below is chunk of the code
<div class="comment-div">
<h2>User 2 <span>15 Aug 2016</span></h2>
<p>When we will be able to build a society of humans on Mars? </p>
</div>
<div class="comment-div odd">
<h2>User 1 <span>15 Aug 2016</span></h2>
<p>I think if you managed to keep your hand still in the bucket, you would suffer from significant muscle atrophy. </p>
</div>
<div class="comment-div">
<img src="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png" alt="Smiley face">
</div>
<div class="comment-div">
<img src="http://vectorlogo4u.com/wp-content/uploads/2015/09/Google-New-2015-logo-720x340.png" alt="Smiley face">
</div>
Here's the fiddle for the same. Please help
add width 100%
.comment-div img{
width:100%;
}
I think img with width and height 100% will work.
img{
width: 100%;
height: 100%;
}
fiddle:
https://jsfiddle.net/3aau3ks7/2/
.comment-div img{
width:100%;
height:100%;
}
add the style
.comment-div img{
width:100%;
height:100%;
}
.comment-div{
box-sizing:border-box;
}
to your style sheet it works fine,I'm added the snippet below.
comment-div h2 {
width: 100% !important;
font-size: 14px !important;
margin-bottom: 5px !important;
font-weight: 400 !important;
color: #673a9a !important;
text-transform: capitalize !important;
}
.question-div p {
display: block;
}
.comment-div p {
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: #000;
}
.comment-div.odd:after {
bottom: 15px;
left: auto;
right: -7px;
border-color: transparent transparent #bbd7ed transparent;
}
.comment-only .comment-div {
background-color: #95d6ff;
}
.comment-div {
background-color: #6ee3ed;
width: 100%;
position: relative;
float: left;
margin-top: 7px;
height: auto;
padding: 10px 15px;
border-radius: 4px;
}
.comment-div img{
width:100%;
height:100%;
}
.comment-div{
box-sizing:border-box;
}
<div class="comment-div">
<h2>User 2 <span>15 Aug 2016</span></h2>
<p>When we will be able to build a society of humans on Mars? </p>
</div>
<div class="comment-div odd">
<h2>User 1 <span>15 Aug 2016</span></h2>
<p>I think if you managed to keep your hand still in the bucket, you would suffer from significant muscle atrophy. </p>
</div>
<div class="comment-div">
<img src="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png" alt="Smiley face">
</div>
<div class="comment-div">
<img src="http://vectorlogo4u.com/wp-content/uploads/2015/09/Google-New-2015-logo-720x340.png" alt="Smiley face">
</div>

how to space 4 images equally within a div?

i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.

Make div fill up rest of the parent

I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/

Twitter Bootstrap breaking contents of div with several elements inside

I am using bootstrap to develop a responsive site.
I have two containers that have content which I don't want to break onto new lines if the window is resized.
I currently have this fiddle which demonstrates.
I thought using clearfix on the parent container for each news item would work. But the text is breaking from the image on resize.
You can see this in this image
Any clues?
This is the basic css (although it's all in the fiddle):
/* News items */
.news-item {
padding:10px 0 10px 10px;
}
.news-item p {
padding:0;
margin:0;
}
.news-item img,
.news-item-text {
float:left;
}
.news-item-text {
padding:0 0 0 5px;
}
.news-heading {
font-size:18px;
}
.news-tags {
font-family:ffs-italic;
font-size:12px;
}
This is the top of the html:
<div class="row"><!-- breaking and buzzing -->
<div class="span4"><!-- breaking news -->
<h2>Breaking</h2>
<div id="breakingNews" class="rounded clearfix">
<div class="news-item clearfix">
<a href="">
<img src="img/news/sm/sq01.jpg" width="54" height="54" />
</a>
<div class="news-item-text">
<p class="news-heading">Omni Scents to launch...</p>
<p class="news-subheading">At vero eos fragrance line inspired</p>
<p class="news-tags">BEAUTY, PRODUCTS</p>
</div>
</div>
<div class="news-item clearfix">
<a href="">
<img src="img/news/sm/sq02.jpg" width="54" height="54" />
</a>
<div class="news-item-text">
<p class="news-heading">IFF finishes year strong...</p>
<p class="news-subheading">Lorem ipsum in dolor contratis</p>
<p class="news-tags">INDUSTRY</p>
</div>
</div>
You in those cases you need to float your divs and also specify a width for the div, like this:
.news-item {
padding: 10px 0 10px 10px;
float: left;
width: 220px;
}
Also you need to determine the width of each <p>inside the divs, like this:
.news-item-text {
padding: 0 0 0 5px;
width: 160px;
}
For responsive layout, you need to use the tag #mediato set each width again, like:
#media (max-width: 767px) {
.news-item {
padding: 10px 0 10px 10px;
float: left;
width: 160px;
}
.news-item-text {
padding: 0 0 0 5px;
width: 100px;
}
}
I hope it works!
.news-item a
{
display: block;
float: left
}
.news-item-text
{
float: right;
width: 75%; /* adjust this to fit */
}