I have a div on the top.
< div class="ad-top">
< img class="adtop" src="images.jpg" height="90" width="728"/>
< /div>
I have tried this code below
.ad-top{
padding: 0;
height: 90px;
width: 728px;
margin:0px 100px 0px 100px;
border: 1px solid black;
float: left;
}
but it still takes horizontal space to the right and pushes the advertisement on the right below. How to fix it?
This is the code for advertisement on the right.
div.ad-right{
height: 600px;
width: 300px;
margin-right: 50px;
float: right;
}
And this is the code for the section. (Note = the divs for advertisements are not children of the section.)
section{
padding-left: 50px;
display: inline-block;
}
section div{
width: 900px;
}
section div p{
text-align: left;
padding-bottom: 50px;
}
Hi now remove float left to your class .ad-top and add display:inline-block; and vertical-align:top; and define your img tag vertical-align:top as like this .
.ad-top{
float:none;
border: solid 1px black;
display:inline-block;vertical-align:top;
}
.ad-top img{
vertical-align:top;
}
Demo code is
div.ad-right{
height: 600px;
width: 300px;
margin-right: 50px;
float: right;
}.ad-top{
padding: 0;
height: 90px;
width: 728px;
margin:0px 100px 0px 100px;
border: solid 1px black;
display:inline-block;vertical-align:top;
}
.ad-top img{
vertical-align:top;
}section{
padding-left: 50px;
display: inline-block;
}
section div{
width: 900px;
}
section div p{
text-align: left;
padding-bottom: 50px;
}
<div class="ad-top">
<img class="adtop" src="https://www.gravatar.com/avatar/9b4f9deed7c1533d605bc3efb42e3604?s=32&d=identicon&r=PG&f=1" height="90" width="728"/>
</div>
Add parent div like wrapper or container which contain static width that include both ads width including margins and also give margin: 0 auto; for the parent div.
<div style="margin:0 auto;width:1278px; ">
<div class="ad-top"></div>
<div class="ad-right"></div>
</div>
Seems to me that your problem is the order of your elements. Because your "ad-right" div comes after the content section, it begins at the same height.
Here is an updated version where I have changed the order of the elements.
In summary, it is like this now:
<div class="ad-top">
<img class="adtop" src="http://dummyimage.com/728%20x%2090" height="90" width="728" />
</div>
<div class="ad-right">
<img class="adbig" src="http://dummyimage.com/300%20x%20600" height="600" width="300" />
</div>
<section><!--content--></section>
Update/add below css code:
.middle-container{
margin:0 auto; width:1132px;
}
.ad-top {
padding: 0;
height: 90px;
width: 728px;
margin:0px 100px 0px 0px;
border: 1px solid black;
display: inline-block;
vertical-align: top;
}
div.ad-right {
height: 600px;
width: 300px;
float: right;
}
section {
padding-left: 50px;
}
section div {
width: 100%;
}
And follow below html structure in your code:
<div class="container">
<div class="header"></div>
<div class="middle-container">
<div class="ad-top"></div>
<div class="ad-right"></div>
<section></section>
<footer></footer>
</div>
</div>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 5 years ago.
Hi I have the below HTML, Inside the Container I have Header, section and div.
With my current CSS below the div with class rightSideDiv does not show to right to the section element.
.container {
height: 500px;
widht: 500px;
background-color: red;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.
Apply float: left; to both containers, use width: 50%; instead of px and display: block; header
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:50%;
height:200px;
background-color: yellow;
float: left;
}
.rightSideDiv {
width:50%;
height:200px;
background-color: pink;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Change the H2 to display: block;, and then add float:left; to both boxes.
When you want divs side-by-side through floating, float them the same direction.
rightSideDiv is 8 pixels taller than the other. That is because the 4px border is added on top of the height. Consider using box-sizing: border-box;, which makes the border get absorbed into the set height, instead of being added on top of it.
.container {
height: 500px;
width: 600px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
display: inline-block;
float: left;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
display: inline-block;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Try using flexbox and display:flex instead. With very few changes to css you can get something like this: https://jsfiddle.net/vnuz47va/2/
.container {
height: 500px;
width: 520px;
background-color: red;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
width:100%;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
change your css with this :
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
float : left;
width: 50%;
height:200px;
background-color: yellow;
}
.rightSideDiv {
float : right;
width:50%;
height:200px;
border: 4px solid green;
}
you can use float right and left to align your div, however your container has a width to 400 and your 2 div are 249+249 = 498 so there is a problem here..
I'm trying to learn css and html to do something, but isn't working.
I'm trying to do something like this:
But this is what i'm getting:
My code:
#agenda1 { width: 350px; height: 50px; background-color: white; } #agenda2{ height: 23px; background-color: #bf1a17; border-radius: 10px; margin-top: 10px; width: 60; } #textoagenda{ text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Just wrap the numbers in an element and make it inline-block so that it will display inline with the text but you can apply vertical padding, border-radius for rounded corners, padding as you see fit, a background-color, and vertical-align so it will align properly with the text beside it.
span {
background: #c00011;
border-radius: .75em;
padding: .25em .5em;
vertical-align: baseline;
display: inline-block;
}
<span>26/25</span> TESTTESTASDFASDF
add margin property your main div.
#agenda1 { width: 350px;
height: 50px;
background-color: white;
margin:auto; }
#agenda2{ height: 23px;
background-color: #bf1a17;
border-radius: 10px;
margin-top: 10px;
width: 60; }
#textoagenda{
text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Here you go, try this
<html>
<head>
<style>
#box1{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: green;
}
#box2{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">contents</div>
<div id="box2">contenst</div>
</body>
</html>
I have an div container namend "content". This container got a width of 500px;.
Inside this div are two other divs. One div is called "right", with fixed width of 300px;. The other container ("left") should fill the rest width. Now I can give him a width of 200px, but when I resize the window the width does not change of the "left" container. I want that only the width of the second container "left" change, maybe with a % width?
And when I resize the window it should look like this:
Here is the code:
*{
margin: 0px;
padding: 0px;
}
.content{
width: 500px;
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right{
float: right;
width: 50%;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
JFiddle
You should Change Left Width size To 60%
.left{float: left;width: 60%;height: 20px;background-color: blue;}
.right{float: right; width: 40%;height: 20px; background-color: red;}
I think, this will be the best answer for you. please check the given below code snippet.
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
}
.left{
float: left;
width: 300px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: calc(100% - 300px);width: -webkit-calc(100% - 300px);width: -moz-calc(100% - 300px);
height: 100px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
You want something like this ? You have to resize the window to see the change.
I use calc() function in CSS :
.right{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-left: 10px;
background-color: red;
}
I also use a fluid width for the main container.
See this fiddle
http://jsfiddle.net/7XD8s/300/
.left {
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right {
display: block;
margin-left: 300px;
height: 20px;
background-color: red;
}
No need of calc
http://jsfiddle.net/7XD8s/303/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
overflow: hidden;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
Following code will keep the width of right container fixed at 300px. Left container will occupy rest of the space with 10px margin on its right side.
Please note, total width of content container is 500px.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
width: 500px;
padding: 5px;
}
.left{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
float: right;
margin: 0px;
width: 300px;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
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
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/