You can see the problem here: http://baycity2014.weebly.com/
I'm having the weirdest issue. I set-up these divs, and everything works fine. But when I float a div to the left and the other to right, they seem to "come out" of their container div. The container div collapses, and the div below goes BELOW the parent div and BEHIND the child div.
If I remove the float: right, no problem. What's the issue?
HTML:
<div id="main-wrap2">
<div class="block2">
<div id="left_content">
{content}
</div>
<div id="right_content">
test<br/>
test<br/>
test<br/>
</div>
</div><!-- end container -->
</div><!-- end main-wrap -->
CSS:
#main-wrap2 {
width: 100%;
border: 5px solid;
}
.block2 {
margin: 0 auto;
width: 940px;
}
#left_content {
background:#ffffff;
border-radius:5px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
margin-bottom:6px;
width: 560px;
margin-top: 10px;
float: left;
}
#right_content {
width: 270px;
border: 1px solid;
margin-top: 10px;
float:right;
}
set
#main-wrap2 {
display: inline-block;
}
Try it :
make a css class .clr:{clear:both} and modify ur html code to :
<div id="main-wrap2">
<div class="block2">
<div id="left_content">
{content}
</div>
<div id="right_content">
test<br/>
test<br/>
test<br/>
</div> <div class="clr"></div>
</div><!-- end container -->
</div><!-- end main-wrap -->
Hope it will help u :)
Make their parent have:
.block2 {
overflow:auto;
}
This will allow it to resize with the children.
It's a classic clearfix issue. Explanation: http://nicolasgallagher.com/micro-clearfix-hack/
Basically it uses pseudo-elements to add a div with "clear: both;" on it so it clears.
just like Simon says,put some background to see the difference
display:inline-block;
background:aqua;
<div id="main-wrap2">
<div class="block2">
<div id="left_content">
{content}
</div>
<div id="right_content">
test<br/>
test<br/>
test<br/>
</div>
</div><!-- end container -->
</div><!-- end main-wrap -->
#main-wrap2 {
width: 940px;
border: 5px solid;
margin: 0 auto;
}
.block2 {
display: inline-table !important;
}
#left_content {
background:#ffffff;
border-radius:5px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
margin-bottom:6px;
width: 560px;
margin-top: 10px;
float: left;
}
#right_content {
width: 270px;
border: 1px solid;
margin-top: 10px;
float:right;
}
I hope this works for you!
#main-wrap2 {
width: 100%;
border: 5px solid;
overflow:auto;
}
.block2 {
margin: 0 auto;
width: 940px;
overflow:auto;
}
/*use overflow:hidden; or overflow:auto; in parent div tags.. */
If you float an element, you need to make sure its parent is also floated.
Related
This question already has answers here:
CSS center display inline block?
(9 answers)
Closed 5 years ago.
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder{
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
}
.content {
height: 100%;
width: 400px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
display: inline-block;
font-size: 0;
margin: 0 auto;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
Even though I have margin: 0 auto; on the .detailedBox it still isn't centering. Is it because it doesn't have a fix width? It doesn't have a fixed width because I want the .detailedBox to be the width of all the .content's combined, but also centered.
If you change .detailBox to have display: flex (instead of inline-block) and then do justify-content: center then it'll center that div horizontally.
Since .detailBox is set to inline-block, it cannot be centered by using margin:0 auto. One way to understand this is that the "margin centering" technique relies on "filling up" available horizontal space. But there is no available space when using an inline element. (Reference: margin:auto; with inline-block.)
Also note that:
10.3.9 'Inline-block', non-replaced elements in normal flow
If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
— w3.org
One alternative is to let .detailBox default to display:block and set text-align:center to horizontally center it's child .content elements, which are inline-block.
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder {
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
}
.content {
height: 100%;
width: 100px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
font-size: 0;
text-align:center;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
You mentioned that you want .detailBox to be the width of all the content combined. So, if for some reason you need .detailBox to remain inline-block, you could set text-align:center on it's parent, .holder. Like this:
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder {
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
text-align:center;
}
.content {
height: 100%;
width: 100px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
display:inline-block;
font-size: 0;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/W9LXd/
I want the div under the #araclar to have it's right border stay in the same line. How can I prevent it from shifting?
CSS:
#düzenleyici{
border: 1px solid #000;
width: 600px;
height: 300px;
box-shadow: 1px 1px 4px #000;
}
#araclar{
width:auto;
height:50px;
background:#EEEEEE;
display:block;
padding:5px 15px 5px 15px;
border-bottom:1px solid #000;
}
#araclar>div{
padding:0 5px 0 5px;
display:inline;
border:1px solid #000;
}
HTML:
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
<div>
</div>
</div>
Change display: inline; to display: inline-block;
Use: http://jsfiddle.net/W9LXd/1/
display: inline-block instead of display-inline
Or give a specific width.
IMO there is no problem with your CSS
Your HTML is malformed, Please close the inner most div - on which you have set display:inline
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
</div> <!-- yOU have not closed the tag here -->
</div>
</div>
FIDDLE
I have a div around an image like this:
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
The result is that the div is bigger than the image. I would like to wrap it around the image giving it the same height and width (without setting dimension)
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:100%;
height:100%;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
I tried height and width 'auto' but it also doesn't work.
JsFiddle
You could add these:
img {
display: block;
}
.q {
float: left;
}
and remove:
.q {
width: 100%
height: 100%;
}
jsfiddle
I found this method the easiest,
<div style="display:inline-block">
<p style="float: left; padding-left: 20px">
<img src="Images/user.png" style="height: 200px; width: 207px" />
</p>
<h4 style="text-align: center">Client Zone</h4>
<p>So, he played with that child, the whole day long, and they were very merry.</p>
</div>
This example has text in it but, even if you take the <h4> and last <p> tag the
<div style="display:inline-block;" >
The "display:inline-block;" ensures the whole image gets wraped within the <div> tag.
Set the margin and padding of the div to zero:
div.q{
margin:0;
padding:0;
}
Here yo go
<html>
<head>
<style type="text/css">
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:300px;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
</style>
</head>
<body>
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
<body>
</html>
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>
How do i put a border on a div in css that doesn't have a set height?
Want to achieve this without using any javascript. Code is below.
HTML
<div id="main_container">
<div id="header">
<div id="topMenu">
<ul id="topNav">
<li>Home</li><li>Contact</li><li>Links</li>
</ul>
</div>
<div id="mainMenu">
<ul id="mainNav">
<li >Home</li><li >About Us</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li>
</ul>
</div>
</div>
</div>
css
body{
text-align:center;
min-width:70%;
}
#main_container{
position:relative;
width:980px;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border-color: #999999;
border-style: solid ;
border-width: 1px ;
margin-bottom: 20px;
}
#header{
position: relative;
width: 980px;
}
#mainMenu{
float:left;
width: 980px;
top: 50px;
background-color: #0099FF;
height: 30px;
}
#mainNav{
text-align: left;
}
ul#mainNav li{
display: inline;
margin: 0px 20px 0px 0px;
}
#topMenu{
width: 150px;
top: 10px;
text-align: right;
float:right;
margin-bottom: 20px;
}
ul#topNav li{
display: inline;
margin: 0px 10px 0px 0px;
}
#footer{}
Thanks in advance.
Does it work?
<div style="border:1px solid #000">
Your content here
</div>
It doesn't matter if there is no height attribute. Just use the border property as you normally would.
Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you're still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:
<div style="clear:both"></div>
Just give the div some padding or content inside.
div {
border: solid 1px #000;
padding: 10px;
}