The "blank" is as wide as the whole page. Now I want to add a google ads div after the text "back to topic". I already try "float:left". It do not work well.
<div class="blank">
<p>
< Back to the topic
</p>
this is google ads!
</div>
CSS
.blank p{
width:980px;
height:25px;
margin:80px auto 0px auto;
}
.blank p a{
color:#007aff;
font-size:20px;
}
Separate your elements what you want to float, and wrap them with a container. After that, clear. JSFIDDLE
<div class="container">
<div class="blank">
<p>« Back to the topic</p>
</div>
<div class="advert"><p>this is google ads!</p></div>
<div class="clear"></div>
</div>
CSS
div.container {
width:980px;
height:25px;
margin:80px auto 0px auto;}
.blank {
float: left;
margin-right: 20px;
}
.blank p a{
color:#007aff;
font-size:20px;
}
.advert {float: left;}
.clear {clear: both;}
You could use display: inline-block;
html
<div class="blank">
<p>< Back to the topic</p>
<div class="google-ad">this is google ads!</div>
</div>
css:
.blank p{
width:980px;
height:25px;
margin:80px auto 0px auto;
display: inline-block;
}
.blank p a{
color:#007aff;
font-size:20px;
}
.google-ad{
display: inline-block;
}
Related
I'm trying to design a flag for a website i'm doing and the design is the parts at the bottom of the flag, they stack when i don't float them (expected) but when i do float them, they shrink to the text inside of the box, How can i fix this? Here's my code:
#flag1{
max-width:400px;
max-height:1000px;
margin:0 auto;
}
#mainflag{
background-color:#BA0500;
max-width:400px;
max-height:1000px;
position:relative;
height:auto;
margin: 0 auto;
text-align:center;
padding:5px;
color:white;
}
#flagdesign1{
background-color:#BA0500;
max-width:100px;
position:relative;
max-height:50px;
color:#BA0500;
margin-top:-21px;
margin-right:20px;
}
<div id="flag1">
<div id="mainflag">
<h1>Flag</h1>
</div>
<div id="flagdesign1">
<h1>A</h1>
</div>
<div id="flagdesign1">
<h1>A</h1>
</div>
</div>
In the end, it should look something like these
If I understand your question well, you could try using display: table;.
Also, an ID is supposed to be unique, you should use classes instead.
I also used span instead of h1 for the flag element, as IE might not permit using display: inline-block;, depending on the version you're supporting.
#flag1{
max-width:400px;
max-height:1000px;
margin:0 auto;
}
#mainflag{
background-color:#BA0500;
max-width:400px;
max-height:1000px;
position:relative;
height:auto;
margin: 0 auto;
text-align:center;
padding:5px;
color:white;
}
.bottomFlag {
display: table;
width: 100%;
}
.bottomFlagElem {
display: table-cell;
}
.bottomFlagElem.center {
text-align: center;
}
.bottomFlagElem.left {
text-align: left;
}
.bottomFlagElem.right {
text-align: right;
}
.bottomFlagElem span {
display: inline-block;
width: 100%;
background-color:#BA0500;
max-width:100px;
position:relative;
min-height:30px;
max-height:50px;
color:#BA0500;
margin: 0;
}
<div id="flag1">
<div id="mainflag">
<h1>Flag</h1>
</div>
<div class="bottomFlag">
<div class="bottomFlagElem left">
<span>A</span>
</div>
<div class="bottomFlagElem center">
<span>A</span>
</div>
<div class="bottomFlagElem right">
<span>A</span>
</div>
</div>
</div>
I am creating a code for my web programming class. I'm having troubles having my DIV tags to line up. I'm needing them to be equal, and no matter what I do I can't get them to work. The .black and .grey are the same part, and I'm not sure how to make it so they are even.
.css
.main {
background-color:#e3e2e2;
margin-bottom:1em;
padding:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin:93%;
border-radius:20px;
float:left;
margin:20px;
}
.bg1 {
background-color:#d2cdc8;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
width:65%;
float:left;
}
.bg2 {
background-color:#a79f97;
border-top-right-radius:20px;
width:35%;
float:right;
}
.bg3 {
background-color:#a79f97;
border-bottom-right-radius:20px;
width:35%;
float:right;
}
.black {
background-color:#3e3831;
margin-left:10px;
margin-right:10px;
text-align:center;
width:92%;
border-top-left-radius:20px;
border-top-right-radius:20px;
float:right;
margin-top:20px;
margin-right:20px;
margin-left:20px;
color:#d6d3c6;
font-family: TF2Build;
}
.grey {
background-color:#514840;
margin-left:10px;
margin-right:10px;
text-align:center;
width:92%;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
float:right;
margin-bottom:20px;
margin-right:20px;
margin-left:20px;
color:#aba9a8;
}
.html
<div class="bg1">
<div class="main">
<p></p>
</div>
</div>
<div class="bg2">
<div class="black">
<p>Test</p>
</div>
</div>
<div class="bg3">
<div class="grey">
<p>Test</p>
</div>
</div>
Js Fiddle:
http://jsfiddle.net/W4Xb3/1/
I made some changes to your HTML, wrapping it in a "table" div and display the children as tablecells. (dropping .bg3, since it isn't needed)
HTML:
<div class="wrap">
<div class="bg1">
<div class="main">
...
</div>
</div>
<div class="bg2">
<div class="black">
...
</div>
<div class="grey">
...
</div>
</div>
</div>
CSS:
.wrap {
display: table;
width: 100%;
}
.bg1 {
display: table-cell;
vertical-align: top;
}
.bg2 {
width:35%;
display: table-cell;
vertical-align: top;
}
And the updated Fiddle.
You're fighting issues with borders/margins/padding modifying the height/width. IE before v9 used border-box as default, all other browsers and new versions of IE use content-box. The only time I'll admit IE made things easier:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Try border-box on everything then readjust your height/width values.
I have an extremely simple layout right now:
<div class="spacer">
<h1>Finalizing Your Account </h1>
</div>
<div class="greycont60 greycont">
<div class="minispacer"><h5>Almost done! Just a few things left...</h5></div>
</div>
<div class="greycont40 greycont"></div>
<div style="clear:both;"></div>
Here is the CSS:
.minispacer {
background: #d9d9d9;
height:30px;
width: 300px;
padding-left:10px;
}
.greycont60 {
width: 56%;
float: left;
}
.greycont40 {
width: 36%;
float: right;
}
.spacer {
height:56px;
background:url(../images/bg2.png) repeat;
padding:0 10px;
margin-top:20px;
margin-bottom:10px;
}
.spacer h1 {
font-size:22px;
padding-top:4px;
color:#727272;
}
.greycont {
background-color:#e8e8e8;
padding:15px;
margin-bottom:10px;
}
Now here is how it turns out:
Why is their so much space about the MiniSpacer bar? I tried to add 1px of top padding and suddenly the bar was doing some crazy things...
Try adding margin:0px; to your h5 tag.
Heading tags get default top and bottom margins.
Thanks,
Aditya
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.
i have div's wrapped under div's my html code is.
<div id="content-row">
<div id="left-box">
<div id="small-box">
</div>
<div id="small-box">
</div>
<div id="small-box">
</div>
<div id="small-box">
</div>
</div>
</div>
and my css is
/*content-row*/
#content-row {
margin: 0 auto!important;
padding-left:50px;
width:990px;
height:320px;
padding-bottom:20px;
}
#left-box {
float:left;
width:360px;
height:340px;
}
#small-box {
width:160px;
height:150px;
background-color:#fff;
float:left;
margin:0px 20px 20px 0px;
}
the above style sheet is exclusively for ie6. my problem is the left-box is taking an extra 20px at the right side. when i have defined the left-box to be 360px; it it taking as 380px;
here is the link to the full code.
http://jsfiddle.net/HXGsT/
what is wrong with the code?
It's a known bg in IE6, see this page for more information:
http://www.positioniseverything.net/explorer/doubled-margin.html
Basically, the quick fix is to also add display: inline; to the floating element.
In response to your comment:
<div class="content-row">
<div id="left-box">
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
<div class="small-box">
</div>
</div>
</div>
.content-row {
margin: 0 auto!important;
padding-left:50px;
width:990px;
height:320px;
padding-bottom:20px;
}
#left-box {
float:left;
width:360px;
height:340px;
}
.small-box {
width:160px;
height:150px;
background-color:#fff;
float:left;
margin:0px 20px 20px 0px;
}
The id #left-box can be an ID as there is only one of these elements with id="left-box" in the document, but because the others are repeated, they must be defined with classes :)