Trying to center a div that will contain responsive adsense code.
example :
<div class="wrapper">
<div class="adsense">adsense code here</div>
</div>
I can center the div if I type the exact measurement of the ad. so 728x90 is the max I want. At the moment I have a img as a temp placement and it works fine. Problem is if I type in exact px then it wont be responsive.
Any ideas please?
Ok this is my actual code...
<section class="main-content">
<div class="top-banner">
<img src="img/ad_top.jpg">
</div>
</section>
(img is there as a placeholder for notepad++)
.main-content {
float: left;
width: 75%;
}
.top-banner {
margin:0 auto;
}
this just places the img left and not center.
What are you talking about? Horizontal centering is done with margin: 0 auto; it doesn't matter what size the container has.
what do u think of this?:
.wrapper{
width:100vw;
border:1px solid red;
}
.adsense{
border:1px solid black;
width:80%;
margin:0 auto;
}
http://codepen.io/matoeil/pen/pNNRNZ
Related
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I'm sure this is very simple stuff, but I hate CSS and it's just not playing ball for me.
Here's an illustration of my site layout:
The aim is to have the flash centered, and the div containing an ad slightly to the right. Obviously it's important that I can easily set the gap between the flash and the ad.
At the moment I'm using a container div, shown in dotted blue, with the flash centered inside it and the ad display: inline-block, float:right. It works, but the problem is if the browser width is reduced to the point where it is smaller than the dotted blue box, the empty space on its left is preserved and the flash and ad are pushed to the right and cut off. I'd like the opposite to happen, the ad is preserved and the left side of the container is cut off.
All help greatly appreciated!
You really should share you problematic code, but from what I understand, you can try something like:
.container {
text-align: center;
margin: 0 auto;
}
.flash, .ad {
display: inline-block;
}
While the HTML is:
<div class="container">
<div class="flash"></div>
<div class="ad"></div>
</div>
use below code
html code is.
<div id="parent">
<div id="left">
<p>flash</p>
</div>
<div id="right">
<p> advertise</p>
</div>
</div>
and css code is
#parent{
border:1px solid #CC0000;
overflow:hidden;
margin:0 auto;
}
#parent div{
float:left;
}
#left{
border:1px solid #000;
margin-left:150px;
width:300px;
height:250px;
}
#right{
border:3px solid #000;
width:200px;
height:250px;
}
I've seen the others answers and I think I've found a solution.
CSS:
.container {
text-align: center;
padding: 15px 0;
min-height: 200px;
}
.flash, .ad {
display: inline-block;
min-height: 200px;
}
.flash {
min-width: 300px;
margin-left: 110px; //this has to be total width of .ad
}
.ad {
min-width: 100px;
margin-left: 10px;
}
HTML:
<div class="container">
<div class="flash"></div><!--
--><div class="ad"></div>
</div>
http://jsfiddle.net/wL3wzt8j/2/
Since this code will not work well with what you're trying to do (on screens that are smaller than the container), here's another fiddle, that involves absolute positioning:
http://jsfiddle.net/wL3wzt8j/3/
I'm using the twitter bootstrap and I am having a hard time figuring out how to separate the background color of two columns that are inside of a main container div, yet have it go full-width.
Here is a fiddle of what I have so far: http://jsfiddle.net/seeplanet/ZTbwz/
My main problem is that I want to have the two columns centered on the page and not extending to either side. That is why I have the max-width set on the container.
My HTML:
<div id="featured-content">
<div class="container">
<div class="row">
<div class="col-sm-9">
Featured Video or Image Gallery
</div>
<div class="col-sm-3">
Other Information
</div>
</div>
</div>
</div>
My CSS:
#featured-content {
background-color: #c7591f;
padding: 20px 0px;
}
.container {
max-width: 960px;
margin:0 auto;
}
.col-sm-9{
width:75%;
float:left;
background:yellow;
}
.col-sm-3{
width:25%;
float:left;
}
}
And this is what I would like it to look like:
Add display:table; to your container like this:
.container {
max-width: 360px; /* If I remove this, then it works, but then my content is not centered */
margin:0 auto;
display:table;
}
JS Fiddle
http://jsfiddle.net/grrenier/3TE4X/1/
Try this other JS Fiddle:
http://jsfiddle.net/grrenier/3TE4X/2/
On the webpage, I would like to create a virtual frame (centered about the page) and be able to align elements (e.g images, text, etc) within the frame using CSS properties.
Since a picture is worth a thousand words, this is what I mean:
I'd want to be able to align "Text1" to the left with respect to the virtual frame which is kept centered about the webpage. Similar idea with "CenteredText" and the blue box being aligned to the right relative to the frame.
I'd really appreciate suggestions on how I'd be able to do this.
This may help you:
HTML:
<div class="frame">
<div>Text1</div>
<div class="centered">Centered text</div>
<div class="box"></div>
<div class="clr"></div>
</div>
CSS:
.frame{width:80%; margin:0 auto; border:1px solid #444; height:500px}
.centered{text-align:center}
.box{background:blue; height:50px; width:50px; border:2px solid black; float:right}
.clr{clear:both}
jsfiddle: http://jsfiddle.net/ashishanexpert/fqaDQ/
margin: 0 auto;
in your css.
You need a div with a class or id you can attack to and then give it the above property.
This will centre the div in the page.
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="centered">centre</div>
<div id="right">right</div>
</div> <!--close wrapper-->
css:
#wrapper{
margin: 0 auto;
width: 960px;
position: relative;
}
#left{
float: left;
}
#right{
float: right;
}
Good luck!
Hi to all,
I'm trying to make 3 divs equidistant from each other. The DIV width is determined by the IMG file in it.
I have succeeded in making a container div 80% width of the page and is centered.
However, the DIVs inside this are equidistant to each other (for as far I can see) but do not center themselves according to the div they are in.
HTML:
<div class="slide" id="slide5" data-slide="5" data-stellar-background-ratio="0">
<div class="slide5_wrapper">
<div class="slide5_recd2011">
<img src="images/RECD2011_thumbnail.png">
</div>
<div class="slide5_recd2012">
<img src="images/RECD2011_thumbnail.png">
</div>
<div class="slide5_recd2013">
<img src="images/RECD2011_thumbnail.png">
</div>
</div>
And the CSS:
.slide5_wrapper{
margin: 0 auto;
width:80%;
position: relative;
max-height:80%;
top:10%;
text-align:justify;
}
.slide5_recd2011, .slide5_recd2012, .slide5_recd2013 {
margin: 10px;
height:auto;
border-radius:15px;
vertical-align: top;
display:inline-block;
}
#slide5_wrapper:after {
content: '';
width:100%;
display:inline-block;
}
Excuse me for my horrible use of terminology (wrappers /containters w/e) just want this to work.
I'm not a real website coder, just trying to learn and I have this project I have taken on while not being too qualified for it (it's a temporary non-corporate website and not going to be my business so I'm not destroying the work field or anything).
Thanks in advance
Here is the link with explanation, here is the working sample.
#slide5_wrapper{
text-align: justify;
}
#slide5_wrapper:after{
content:'';
width:100%;
display:inline-block;
}
#slide5_wrapper div{
display: inline-block;
}
Hope it helps.
What's just about this:
.slide5_recd2012{
width: 33%;
float:left;
box-sizing: border-box;
padding: /*some padding you need */ 0;
}
?