Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is the code, you can see what is wrong easily.
#wrap {
text-align: center;
height: auto;
margin: 0 auto;
width: 1024px;
background: #CCC;
}
#sidebar {
height: auto;
width: 300px;
padding: 20px;
margin-top: 60px;
padding-bottom: 100px;
border: outset;
float: right;
overflow: auto;
}
#content {
border: outset;
overflow: auto;
width: 500px;
height: auto;
padding: 20px;
margin-top: 60px;
padding-bottom: 100px;
clear: left;
}
<div id="wrap">
<div id="sidebar">Some text here</div>
<div id="content">Some text here</div>
</div>
I have a sneaky suspicion that it has to do with float: right, but I can't get the sidebar to stay on the right side without it.
I want the wrap to expand to the height of whatever is inside it, which is why I set height: auto but it's not working, please help.
Add this css proprty to this ID
#content{
float: left;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 hours ago.
Improve this question
Is there a way to draw with CSS broken line between two divs? Like in picture white line.
Add center div between to two box.
Add ::before and ::after pseudo element to make zig line.
Adjust size according to your need.
.top-box,
.bottom-box {
width: 300px;
height: 150px;
background-color: green;
position: relative;
}
.top-box {
margin-left: 200px;
margin-bottom: 100px;
}
.bottom-box {
margin-top: 100px;
}
.zig-line {
width: 200px;
height: 3px;
margin-left: 150px;
background-color: red;
position: relative;
}
.zig-line::after,
.zig-line::before {
content: "";
position: absolute;
width: 3px;
height: 100px;
background-color: red;
}
.zig-line::before {
left: 0;
}
.zig-line::after {
right: 0;
bottom: 0;
}
<div class="top-box" style="background-color: blue;"></div>
<div class="zig-line"></div>
<div class="bottom-box"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need to position divs as follows:
The div2 element must be centered.
The div3 element must be with 30px space between div3 finishes and div2 starts.
The div4 element bust be with 30px space between div2 finishes and div4 starts.
I need some help cause i don't know how to achieve so..
You really should have added some of your tries in html and css. But i go in for an answer, because you drew what you wanted to achieve.
The biggest problem with your question is, that you did not give enough information. I think you try to have the given layout, with 3 centered <div>s of unknown width.
You can solve this with flexbox.
Here is one possible answer to your question:
HTML:
<div class="container">
<div class="left">Text</div>
<div class="center">More text</div>
<div class="right">Some text</div>
</div>
(relevant) CSS:
.container
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container > div
{
margin: 0 15px;
flex: 0 0 auto;
}
Full demo: http://jsfiddle.net/vk4Lqvo7/1/
Another option would be to position your div1 relative while applying absolute positioning to the div2,div3, & div4. Here is a simple example:
http://jsfiddle.net/clarketm/k9tbjjoy/2/
HTML
<div id="div1">
<div class="insideDiv" id="div2"></div>
<div class="insideDiv" id="div3"></div>
<div class="insideDiv" id="div4"></div>
</div>
CSS
#div1 {
width: 100px;
height: 100px;
background-color: black;
position: relative;
}
.insideDiv {
position: absolute;
top: 50%;
left: 50%;
padding: 0;
width: 10px;
height: 10px;
}
#div2 {
margin: -5px 0 0 -5px;
background-color: green;
}
#div3 {
margin: -5px 0 0 25px;
background-color: red;
}
#div4 {
margin: -5px 0 0 -35px;
background-color: blue;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hi how do i have divs layout like this using CSS float and other methods. i am trying to avoid using tables and learn how to float divs properly.
Thanks
first id use a main div with display:block;
then inside that main div for your example create 4 sub divs with display:inline-block;
Maybe take a look at solutions like Singularity or Susy. Both capable grid frameworks giving you a helping hand accomplishing exactly what you intend to do and keep the necessity of math out of your head. ;)
Sigh those were a lot of boxes ;D. I couldn't exactly see the dimensions of each box but I did my best to replicate what you showed (no absolute or relative positioning used!).
Here's the jsFiddle: link The formatting is odd, jsFiddle's tidyUp is not working for me
Here's the codepen: link Use this one instead
The trick is to use float: left when you want things to stack horizontally. When you want them to stack vertically, just wrap those elements in a container and make sure each has display: block. You use these two things to accomplish this sort of thing.
HTML:
<div id="container">
<div id="left0">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="left1"></div>
<div id="left2"></div>
<div id="row1">
<div></div>
<div></div>
</div>
<div id="row2"></div>
<div id="row3">
<div></div>
<div></div>
</div>
</div>
CSS:
*{ /*includes the border in height&width*/
box-sizing: border-box;
}
div{ /*gives us some general spacing*/
margin: 5px;
background: lightblue;
}
#container{
width: 1200px;
margin: 1em auto;
background: lightgray;
}
/*gives a float-left property to first-level children*/
#container > div{
float: left;
}
#container > div > div{
border: 1px solid red;
}
#left0{
width: 50px;
}
#left0 > div{ /*styles for little boxes*/
height: 40px;
margin: 5px;
}
#left1{
width: 230px;
height: 230px;
}
#left2{
width: 150px;
height: 230px;
}
#row1{
width: 600px;
height: 50px;
}
#row1 div:nth-child(1){
float: left;
width: 350px;
height: 40px;
}
#row1 div:nth-child(2){
float: left;
width: 230px;
height: 40px;
}
#row2{
width: 600px;
height: 70px;
}
#row3{
width: 600px;
height:90px;
}
#row3 div:nth-child(1){
width: 200px;
height: 40px;
float: left;
}
#row3 div:nth-child(2){
width: 100px;
height: 80px;
float: right;
}
I'll comment explaining some of the css3 selectors I used in case you're not familiar with them.
This question already has answers here:
A space between inline-block list items [duplicate]
(8 answers)
Closed 9 years ago.
I have a div with a width of 970px. (That is, of course, excluding borders, margins and padding). I am placing two divs inside this, side-by-side. Here's their CSS:
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; }
Now, this works fine when the total width of the internal divs is 966px or less. When I get larger than that, however, the second div sits beneath the first. Why is this so?
As far as I know, I should be able to have a total width of 970px before I hit problems?
I bet you have new line between these two divs in HTML, and that's the reason.
For following CSS:
#main { width: 970px; }
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }
There is a difference between following 2 HTML markups:
<div id="main">
<div id="content"></div><div id="sidebar"></div>
</div>
and
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
Check this example: http://jsfiddle.net/vnguQ/ and notice white line between elements in second part.
There may be whitespace between both divs and inline block apply styles for that whitespace.Take a look at these links
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
display: inline-block extra margin
How to remove the space between inline-block elements?
This problem happens when the main div having display property "block"(default one).
Add a property for the main div as dispaly:inline, it will automatically adjust the width for the inner divs. Change the css for main div.
#main { width: 970px; display:inline; }
#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have a page with several divisions. The first 3 take up the entire width of the page from the top down 170px. This is followed by a line break and then the fourth division, which should be displayed below the previous divisions. Instead, it is being displayed at the top of the page, underneath the 3 divisions. I've checked and rechecked to make sure the divisions all close properly, but this isn't the problem. I will post relevant code below, CSS first and then HTML as I am using a separate style sheet.
#banleft
{
padding-top: 20px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
float: left;
text-align: center;
width: 200px;
height: 170px;
}
#bancenter
{
padding-top: 20px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
float: left;
text-align: center;
width: 600px;
height: 170px;
}
#banright
{
padding-top: 20px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
float: left;
text-align: center;
width: 400px;
height: 170px;
}
#nav
{
background-image: url(../media/purplemenubar.jpg);
background-repeat: no-repeat;
padding-top: 3px;
padding-left: 30px;
padding-right: 90px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
width: 1150px;
height: 25px;
}
<div id="banleft">Content </div>
<div id="bancenter">Content </div>
<div id="banright">Content </div><br>
<div id="nav" class="cambria3black">Content </div>
Worth noting: I've tried removing the class from the final div, but that doesn't help. Also, when I put actual content inside the "nav" div, it displays in the proper place on the page. It's just the background image of the division that is floating up to the top and behind the other divisions.
Add clear:both to the #nav's styles.
Alternatively, consider using display:inline-block instead of float:left.