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/
Related
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
I am trying to place two divs side by side and using the following CSS for it.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
The HTML is simple, two left and right div in a wrapper div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.
So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.
Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.
I hope there is a fix for that.
Thank you.
EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...
Try a system like this instead:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}
<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>
You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.
This is easy with a flexbox:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Using this CSS for my current site. It works perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
Make both divs like this. This will align both divs side-by-side.
.my-class {
display : inline-flex;
}
Here's my answer for those that are Googling:
CSS:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}
Here's the HTML:
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
You can also use the Grid View its also Responsive its something like this:
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
}
#right {
text-align: right;
grid-column: 4/6;
}
and the HTML should look like this :
<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>
here is a link for more information:
https://www.w3schools.com/css/css_rwd_grid.asp
im quite new but i thougt i could share my little experience
#wrapper{
display: grid;
grid-template-columns: 65% 1fr;
}
#left {
grid-column:1;
overflow: hidden;
border: 2px red solid;
}
#right {
grid-column:2;
overflow: hidden;
border: 2px blue solid;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->
<div style="height:50rem; width:100%; margin: auto;">
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
</div>
margin-right isn't needed though.
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
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!!!
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
I am trying to place two divs side by side and using the following CSS for it.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
The HTML is simple, two left and right div in a wrapper div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.
So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.
Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.
I hope there is a fix for that.
Thank you.
EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...
Try a system like this instead:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}
<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>
You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.
This is easy with a flexbox:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Using this CSS for my current site. It works perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
Make both divs like this. This will align both divs side-by-side.
.my-class {
display : inline-flex;
}
Here's my answer for those that are Googling:
CSS:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}
Here's the HTML:
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
You can also use the Grid View its also Responsive its something like this:
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
}
#right {
text-align: right;
grid-column: 4/6;
}
and the HTML should look like this :
<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>
here is a link for more information:
https://www.w3schools.com/css/css_rwd_grid.asp
im quite new but i thougt i could share my little experience
#wrapper{
display: grid;
grid-template-columns: 65% 1fr;
}
#left {
grid-column:1;
overflow: hidden;
border: 2px red solid;
}
#right {
grid-column:2;
overflow: hidden;
border: 2px blue solid;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->
<div style="height:50rem; width:100%; margin: auto;">
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
</div>
margin-right isn't needed though.
I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)
I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??
I have this as my CSS:
.wrapper{
margin:0 auto;
width: 80%;
display: table-cell;
}
.gridf{
float:left;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.gridl{
float:left;
margin-left: 3px;
width:200px;
min-height:200px;
border:1px solid white;
}
My HTML:
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Please help :D
Your wrapper is a percentage width container with 4 fixed-width child elements floated.
The width of the wrapper is dependent on the width of the viewport. If the viewport is narrowed to the point that the wrapper's width is less than that of the 4 child element widths together, then naturally they won't all fit and therefore will wrap.
The fix is to make sure your wrapper doesn't get smaller than the combination of the children.
So, add up with widths, borders and margins of the child elements and then give the wrapper a min-width attribute equal to that.
Hi i think you should this check to this demo
.wrapper {
margin: 0 auto;
width: 80%;
border: solid 1px red;
overflow: hidden;
}
.gridf,
.grid,
.gridl {
Background: green;
width: 24%;
min-height: 100px;
float: left;
margin: 2px 0;
}
.gridf {} .grid {
margin: 2px 1%;
}
.gridl {
background: yellow;
}
<div class="wrapper">
<div class="gridf">One</div>
<div class="grid">Two</div>
<div class="grid">Three</div>
<div class="gridl">Four</div>
</div>
Although this is an old post, I think that the problem, which I also run into, is the fact that you want all these cells to be of a fixed size, and not %, right? The solution you chose changed initial format where you specified width:200px;
Well, I would suggest to look here: http://jsfiddle.net/gn2bg/
The ONLY one thing I did is to add inner wrapper around your cells:
.inwrapper{
float:left;
overflow: hidden;
min-width: 830px;
}
and new html as this:
<div class="wrapper">
<div class="inwrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Notice that your wrapper requires 80% of space.
The inwrapper, however, tells that its size is fixed - 830px (total of all internal div sizes plus room for padding.)
This way inwrapper uses 'elbows' to stretch the width, and override these 80% of 'wrapper'
I understand that you already made decision as to what is your best solution. I am leaving this response to anyone else in the future who needs exact answer to your exact question.
You can try removing the table-cell display rule from the wrapper and setting percentages (or min-widths) on the child divs like this jsFiddle example.
That should do the trick :
<div class="wrapper">
<div style="width:850px">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
And that will be supported on any browser.
http://jsfiddle.net/5GrKU/3/
HTML
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
CSS
.wrapper{
margin:0 auto;
width: 80%;
display: inline;
}
.gridf{
float:left;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.gridl{
float:left;
margin-left: 3px;
width:20%;
min-height:200px;
border:1px solid red;
}
for you reference i have also added the URL of the demo. http://jsfiddle.net/sg8FE/
UPDATE
just change display:inline in wrapper class to display:block rest all is right and the div's are centered.
by giving a fixed width in your inner divs you are forcing them to have that width no matter what is the size of the view port. And giving the outer div a width of 80% you are shrinking its size with the width of your view port. You need to do either giving fixed width to all those divs or giving a relative width to all.