I have an image which is inside a div. It appears as expected, within the div. When margin-top is added, the background for this div extends downwards. I don't want to have this behavior. How can I change this?
My code is as follows :
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
This ensures that the column with the <p> tag goes on the left side of the screen, and the column with the image goes on the right, and it resizes as you resize the window :).
How can I make this webpage go from
-----div-----------
Text Image
-----/div-----------
to
-----div------------
Text
--/div--Image----
Image illustrating what I would like :
Edit:
I originally skipped over the fact that you provided some HTML and CSS in the question, so in my original answer I just went off the image provided. Looking at the HTML and CSS you provided, the only thing you'd have to do to get the desired result is set a negative bottom margin in your CSS on the img tag. Here's a jsFiddle using your original markup with the only significant addition to the CSS being the negative bottom margin set on the img tag.
The added benefit of doing it this way is that the image will stay in the desired spot (extended slightly below the div that contains it), even when adding more lines of text to the paragraph (p) changes the height of the containing element (.page div).
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
img {
margin-bottom:-50px;
}
Original answer:
You could just position the image below the text, float the image, and set a negative top margin on the image to make it cut back into the element containing the text. This way, the image will keep sitting in the right spot, even when adding more lines of text changes the height of the containing element.
Here's a jsFiddle
HTML
<p>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>
<img />
</p>
CSS
p {
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
background-color: yellow;
border: 3px solid black;
float: right;
margin: -70px 100px;
}
I don't quite understand the question completely, but I coded what you wanted in css with your HTML untouched. Hopefully that helps. Check out the JSFiddle.
http://jsfiddle.net/bH8qA/
HTML:
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS:
.page{
background-color:#cc0000;
border-top:4px solid #000;
border-bottom:4px solid #000;
width:500px;
margin:0 auto;
padding: 5px;
position:relative;
}
.half{
display:inline-block;
width:44%;
vertical-align:top;
text-align:right;
}
.half + .half{
position:absolute;
top:20px;
text-align:left;
margin-left:4%;
}
.half > img{
display:block;
height:100px;
background-color:#F5EB00;
border:4px solid #000;
}
use css and use the overflow: hidden on the parent of that div.
Something like this? http://codepen.io/pageaffairs/pen/urGnL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.page {
width:500px;
margin:0 auto;
padding: 5px;
background: red;
}
.half{
width:44%;
margin:0 2%;
}
.float {
float: right;
}
.page, img {
border: 5px solid black;
}
img {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="page">
<div class="half float">
<img src="imghere.png" alt="img" />
</div>
<div class="half">
<p>Text</p>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to add a title which will show much like a banner for that dive with text in. like the below image.
The problem is I need to set the title text in css.
I have a single div with the content in thats it. I cannot change the HTML code to add things.
Any ideas?
You could do that with before pseudo-element, something like this :
.your_div:before {
content: "Your DIV title";
display: block;
color: #000;
background: #CCC;
text-align: center;
}
But it won't be compatible with old browsers.
div div{
background-color:brown;
border:1px solid white;
text-align:center;
}
.title{
height:40px;
padding-bottom:30px;
background-color:whitesmoke !important;
text-align:center;
}
.main{
border-radius:10px;
border:2px solid red;
box-shadow:0px 1px 5px 2px black;
height:content-width;
}
<!Doctype html>
<html>
<body>
<div class="main">
<div class="title">
<h2>my title</h2>
</div>
<div><p>first div</p>
</div>
<div><p>second div</p>
</div>
</div>
</body>
</html>
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
I want to center the three divs that appear in the mockup below (all have "float:left").
Is this possible?
I don't mind having wrapper-divs.
Text-align:center and display:inline-block won't work with the code I have.
If you want to center them, you can't float them. A better alternative would be to make them all display: inline-block so you can still stylize them as a block element, and they'll still pay attention to your text-align: center on the parent wrapper. This would appear to be a good solution for the limited example you've provided.
In order to account for browser compatibility, you'd need to change them to <span> rather than <div> before adding the display: inline-block on to them. This would be supported in everything IE7 and up, and all other modern browsers. IE6 would not be supported, but it's only widely used in China anymore.
div#wrapper {
width:960px;
margin: 0 auto;
}
http://jsfiddle.net/WyxHQ/1/
edit:
Moved complete code from fiddle to answer as per suggestion
<div id="outer-wrapper">
<div id="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
HTML
div#outer-wrapper{
border:2px solid black;
padding:10px;
width:100%;
}
CSS
div#wrapper{
width:99px;
margin:0 auto;
}
div {
width:33px;
height:20px;
}
div.one{
background:red;
float:left;
}
div.two{
background:blue;
float:left;
}
div.three{
background:green;
float:left;
}
You can also use a list and get the same results:
CSS:
.wrap
{
border:2px solid black;
width:100%;
}
ul
{
width:99px;
margin:0 auto;
height: 20px;
}
ul li
{
width:33px;
height:20px;
float: left;
margin: 0px;
padding: 0px;
}
ul li.red
{
background-color: red;
}
ul li.blue
{
background-color: blue;
}
ul li.green
{
background-color: green;
}
HTML:
<div class="wrap">
<ul>
<li class="red"> </li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
Try this: http://jsfiddle.net/nvpXx/3/
You can wrap your floated divs with an inline-block element and center it within its parent.
HTML
<div id="main">
<div class="wrap">
<div class="item">thing 1</div>
<div class="item">thing 2</div>
<div class="item">thing 3</div>
<div class="clear"></div>
</div>
</div>
CSS
#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}
Potential Pitfall
This doesn't work well if you have so many floated items that they wrap to a second line. At that point, the div.wrap expands to 100% of its container and as a result everything is off-center.
Try this one, keep it simple:
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>
This will make it responsive although it breaks on some point, it helps to create a media query for the max-width:
<style>
#media screen and (max-width:520px){ ul li{float:none} }
</style>
Fiddle here
Floats, as the name suggests, are completely independent of their containers. So, you cannot center them according to a container, because they will know no container.
Hope this helps:
<body>
<div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">
<div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
</div>
</body>
What I would do is add a container div for them.
Then add overflow:auto so that the container div wraps around the 3 divs and then set the container div in the center with margin:0 auto.
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>
I want to achieve this:
I want to display boxes, one main box and below each box a smaller box as you can see in the picture. I define this with the following html structure:
<div class='content'>
<div class='box'>
<a>test</a>
<div class='money'><div id='maxnumber'>
<h3 id='max'>max</h3><h3 id='digit'>0000</h3>
</div></div>
<div id='numbereuro'><h3 id='digit2'></h3>
<h3 id='euro'></h3>
</div>
</div>
<div class='utility'>test</div>
</div>
Here is a working example that shows the result without the smaller box: http://jsfiddle.net/
.box names the bigger box and .utility the smaller box below bot wrapped in .content. I use the following css:http://jsfiddle.net/76fXa/
.content {
margin: 5px;
padding: 5px;
font-size: 11px;
float: left;
}
.utility{
position:relative;
height:50px; width:100px; background:red;
}
.box {
margin: 5px;
padding: 5px;
background: #BBE3A8;
font-size: 11px;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box {
position: relative;
padding: 5px;
width: 180px; height:auto;
cursor:pointer;
}
and I get the following result: http://jsfiddle.net/76fXa/1/
any ideas?
How about this quick fiddle I just made for you.
http://www.jsfiddle.net/ozzy/F3K8k/
Both .box and .utility should be put in another floated div so that they both are constrained within. Just a simplified example
<div id="content">
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
</div>
(attempting to preserve your class names where practical)
You could then set the inner divs to display block so that they fill the constrained area and set a fixed width to section (I will use 50% for demo purposes)
.section
{float:left; width:50%;}
.box
{display:block;}
.utility
{display:block;}
Set the other style properties as needed, and remember the box model when adjusting padding and margins. Sometimes applying too much or too little of either can break off to a newline if something is set wrong.
From what you provided I can't see why position relative would be necessary. If it was intended as an attempt to make the layout you demonstrated then I'd suggest removing it, unless for some reason you are absolutely positioning something within that div relative to it.
EDIT: Didn't realize you had two content divs and a fiddle posted.
http://jsfiddle.net/76fXa/2/
#ArtWorkAD: Is this is how you want it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.content {
float: left;
font-size: 11px;
margin: 5px;
padding: 5px;
}
.utility {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: red;
border-radius: 5px;
clear: left;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #BBE3A8;
border-radius: 5px;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<a>test</a>
<div class="money">
<div id="maxnumber">
<h3 id="max">max</h3><h3 id="digit">0000</h3>
</div>
</div>
<div id="numbereuro"><h3 id="digit2"></h3>
<h3 id="euro"></h3>
</div>
</div>
<div class="utility">test</div>
</div>
</body>
</html>
http://jsfiddle.net/9Ugww/