I have 3 sections within an article, I have the first 2 side by side at 40% width each. One float left, and another right. I cannot get the third section id: interests, to be centered below the 2. I want some margin top to give some space. Also when I minimize the screen it also drops into the footer. Any suggestions, thanks
http://jsfiddle.net/sy8o4vbt/
#interests {
width: 90%;
border: thin solid #000000;
margin-right: auto;
float: none;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
clear: right;
margin-top: 103px;
margin-left: auto;
}
fixed this with appropriate CSS:
#interests {
width: 100%;
margin-top: 20px;
}
#interest_inner_div{
width: 60%;
border: 1px solid;
margin: 10px auto;
}
JSFiddle Link http://jsfiddle.net/7mzp80gg/
Related
I apologize if this is a basic question, but i'm having trouble centering four divs. All four green divs have a float left, then there is a wrapper div (blue). I want to center the four divs but have them aligned like this (On a larger resolution they are not displayed along the middle). So that when reducing the screen size the divs will float underneath each other.
http://jsfiddle.net/qvu712tj/
#blog-wrapper {
background-color: blue;
width: 100%;
height: 700px;
margin-left: auto;
margin-right: auto;
align: center;
}
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px;
float: left;
padding: 5px;
}
<div id="blog-wrapper">
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
</div>
I hope this makes sense please could anyone help?
Try this:
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px 2.5%;
float: left;
/* padding: 5px; */
}
use percentage instead of px for margin and padding
.blog-section{
background-color: green;
height: 200px;
width: 45%;
margin: 1%;
float: left;
padding: 1.5%;
}
Try this
.blog-section{
background-color: green;
height: 200px;
width: 48%;
margin: 12px 1%;
float: left;
}
explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
#container {
box-shadow: 10px 10px 5px #888888;
/*bg transparent*/
background-color: rgba(255, 255, 255, 0.4);
max-width: 960px;
/*centrat in pagina*/
margin: 0 auto;
/*distanta dintre border si continut*/
padding-top: 15px;
padding-right: 15px;
padding-left: 15px;
min-height: 95vh;
position: relative;
}
#header {
background-color: #FFA500;
position: relative;
overflow: auto;
}
#menu {
background-color: #FFD700;
/*dimensiune*/
width: 135px;
/*pozitie*/
float: left;
text-align: center;
/*margini fata de elemente*/
margin-right: 5px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
#content {
background-color: #EEEEEE;
/*dimensiune*/
min-height: 685px;
width: 740px;
/*pozitie*/
position: relative;
/*margini fata de elemente*/
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
padding-top: 10px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
}
Container has everything. Header is inside the container, on top. Under it, I have a div called cont that has no style associated. Inside it, on the left I have menu and content on the right. Inside the content I have a table that overflows the div. How can I make that table fit inside the div?
Here is an image of my app. http://i.imgur.com/BVMlIEF.png?1
Jfiddle http://jsfiddle.net/5f9A4/
This issue came beacuse you have added a long text without any space. Add the following CSS. Hopefully it will resolve the issue.
#content table td
{
word-wrap:break-all;
}
I have reproduced(similar to your image) the issue in your fiddle. Check it out HERE
After that I have added my above solution to resolve this. Check the Updated Solution HERE.
I am trying to convert an existing site into responsive however there is one thing I'm struggling with here:
http://www.brandonsuffolk.com
When you resize the window I want the right column to squash the left one, however at the moment it drops underneath (however once the screen hits the other left div it will change).
When I do it with single divs it works, however as soon as I add a new div inside it, it won't work properly.
Here is the relevant CSS:
.MainOuter {
float: left;
width: 100%;
}
.MainWrapper {
max-width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.ColumnRight {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
float: right;
width: 290px;
padding: 0px;;
}
.ColumnLeft {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
width: auto;
max-width: 670px;
padding: 0px;
}
I'm afraid you're fighting the normal process of responsiveness. responsiveness is supposed to do just what it's doing. If you don't want it to drop under, find the #media for this element and change it to:
#media (min-width:0px) {
width:50%;
}
This may help
Assuming I understood, and you want the right-side column to maintain the fixed width, you'll need to use position:absolute with a left and right value, and width set to auto. This gives you a fixed side and a side that takes the rest of the screen.
Wanting it to only apply after they touch though, is where you'll have to use a media query. Set the media query to apply only when the screen is lower than 1000px, which will tell the left column to change there and become flexible.
EDIT
Try adding this CSS to your site's CSS file, at the end. Additionally I've updated the Fiddle to show how that it works. You might have to tweak the numbers a little, but it'll do what you need.
Example Fiddle
#media screen and (max-width: 1000px) {
.ColumnLeft {
position: absolute;
left: 20px;
right: 320px;
width:auto;
}
}
May this is what you mean with "squash" ?
http://jsfiddle.net/7QVVz/
CSS
.wrap {
display: table;
width: 100%;
}
.left {
display: table-cell;
border: 1px solid green;
width: 350px;
max-width: 350px;
}
.right {
display: table-cell;
border: 1px solid red;
}
.right > .text {
width: 200px;
float: right;
border: 1px solid yellow;
}
HTML
<div class="wrap">
<div class="left">LEFT</div>
<div class="right">
<div class="text">RIGHT TEXT</div>
</div>
</div>
I have a strange behavior on my webpage layout.
When i add some more divs inside "sideBar" div, the central part of the webpage is pushed down. They are not related to the central part. They have borders and i see that they are far from 'main' div. Is there any way to prevent it or i should play with margins every time when i add a new div.
Here is my HTML code:
<div id="sideBarLeft">
<div id='article1'><h3>Article 1</h3><div> //Just added
<div id='article2'><h3>Article 2</h3><div> //Just added
<div id='article3'><h3>Article 3</h3><div> //Just added
<div id='article4'><h3>Article 4</h3><div> //Just added
</div>
CSS code:
#sideBarLeft {
position: fixed;
height: 800px;
width: 250px;
margin-top: 0px;
margin-left: 0px;
margin-right: 1px;
padding-top: 100px;
padding-left: 5px;
float: left;
word-wrap: break-word;
z-index: 1;
border: 1px solid #808080;
}
#article1 {
width: 200px;
border: 1px solid red;
}
Here is the central part:
#container{
margin: 0 auto;
margin-left: 256px;
max-width: 600px;
margin-top: 120px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
float: left;
width: 600px;
border: 1px dotted #808080;
}
Here is the wrapper:
#wrapper {
width: 1200px;
margin: 0 auto;
}
It is likely because you have something in the main div using clear:both;
Try changing it to clear:right; or remove it