I'm on Win XP but this problem occurs on Firefox, IE, and Google Chrome. I want to align two DIVs on the same horizontal plane. I want the div on the left to occupy 24% of the screen and the div on the right to occupy the rest. Everything looks fine when my browser is maximized, but when I click the resize button to make the window smaller, the two DIVs are no longer on the same plane. The top of the right DIV appears beneath the bottom edge of the left DIV (the left boundary of the right DIV is still correctly aligned just after the right boundary of the left div).
How can I make both DIVs appear on the same horizontal plane, even when the window is not maximized? Here is the HTML I'm using ...
<div class="header">
<img src="logo.gif"/>
</div>
<div class="container">
<div id="contents">
<div class="categoryPanel"></div>
<div class="productDetailsPanel"></div>
</div>
</div>
and here is the CSS ...
.header {
width: 100%;
height: 63px;
background-color: #333366;
}
.container {
width: 100%;
}
.categoryPanel {
height: 600px;
width: 24%;
float: left;
margin: 10px 5px 0px 0px;
background-color: green;
}
.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: right;
margin: 10px 10px 0 5px;
}
Thanks, - Dave
One way to kind of achieve the layout you want is to stop floating .productDetailsPanel, and give it a left margin of 25% (i.e. the width of .categoryPanel, plus spacing between them). (You’ll also want to remove the top margin on .categoryPanel.)
http://jsfiddle.net/uSbAs/
But that does mean the spacing between your columns will be defined as a percentage of the .container, rather than a fixed number of pixels.
On .productDetailsPanel, remove float: right and add overflow: hidden, job done; it's exactly what you asked for.
http://jsfiddle.net/thirtydot/KjZ8Q/
The reason overflow: hidden helps in this case is not obvious, read this.
In order for it to take up the entire space you would need to either fill it with something or provide a width. I've create a jsfiddle to show the results. Essentially I modified the .productsDetailsPanel by adding a width: 75%; removing the float:right; and modifying your margin: 10px 0 0 0;
Here is the new css for .productsDetailsPanel
.productDetailsPanel {
height: 600px;
width: 75%;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
margin: 10px 0px 0 0px;
float: left;
background-color: red;
}
http://jsfiddle.net/rhoenig/qXvag/
This could work (float: left):
.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: left;
margin: 10px 10px 0 5px;
}
Related
I've got divs that are a fixed width and height and display in a row. The problem comes when I'm trying to make it responsive. I need the divs to stack in a row underneath eachother.
I made a fiddle http://jsfiddle.net/h657t6r2/1/ so you can see. If you play around with the width of the content window, you'll see the blocks stack but the 4th one then stacks underneath the 2nd one because it is center aligned. I want it to be center aligned because without it it leaves a big gap on the right and doesn't look good. A similar sort of stacking as on https://www.behance.net, except they never have a situation like mine where there's leftover blocks.
What I need is for the 4th block to stack neatly underneath the 1st block when the screen gets smaller and they stack.
FYI: The number of blocks is dynamic, it's not always 4.
<div class="content">
<div class="course_list">
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
</div>
</div>
.coursebox{
border: green 1px solid;
padding:10px;
width: 90px;
height: 90px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.content{
text-align: center;
}
.course_list{
display: inline-block;
}
Per my comment
Since your blocks are fixed width anyway, you can center course_list and leave the blocks inside of it left aligned. Give course_list a width at different break points (media query) to have the ideal number of boxes per row. This is a cross browser solution
Here is an example of simplified version of what you had
http://jsfiddle.net/h657t6r2/2/
.coursebox{
border: green 1px solid;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.course_list{
margin: 0 auto;
width: 560px;
}
#media (max-width: 559px) {
.course_list{
margin: 0 auto;
width: 280px;
}
}
As you can see I only have one break point for simplicity. You can put in as many as you need. Also note I got rid of the space in between your block's closing/opening tags to avoid the extra space when using display inline block
OR
You can have something even simpler like
http://jsfiddle.net/h657t6r2/3/
Set a % width for the centered container and let the blocks fall naturally
.coursebox{
border: green 1px solid;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.content{
}
.course_list{
margin: 0 auto;
width: 80%;
}
Im creating a website for a guild I am apart of, and whilst creating this page, Im trying to have a div within a div, the dark div (contentBox) for holding the lighter divs (contentSection), which in turn, hold text. However, when altering padding of the contentSection div, it also moves the contentBox div. Ill provide screen shots so you can see what I mean.
Html is simply:
<div class="contentBox">
<div class="contentSection">
<h2> We have TeamSpeak!</h2>
</div>
</div>
CSS is:
.contentBox{
background-color: #1E1E1E;
border-color: #080808;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
height: 100vh;
width: 70%;
margin: 0 auto;
}
.contentSection{
background-color: #4B4B4B;
height: 30%;
width: 85%;
margin: 110px auto;
padding-top: 5px;
border-radius: 2px;
padding-left: 15px;
}
What I want it to look like:
What it ends up looking like:
I apologise if im too vague, just ask if you have questions.
Question has been Solved, adding overflow: auto fixed the problem!
Why this is happening
The effect you are seeing is due to collapsing margins. Adding overflow: auto creates a new block formatting context which keeps borders within the edges of the containing block.
Adding padding also prevents margins from collapsing. In your top image, you have padding, so the margin on h2 and the inner div are contained within the outer block. With no padding, the margin of inner elements collapse with the margins from the outer div's.
try this
is it ok?
.contentBox {
background-color: #1E1E1E;
border-color: #080808;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
height: 100vh;
width: 70%;
margin: 0 auto;
}
.contentSection {
background-color: #4B4B4B;
height: 30%;
width: 85%;
margin: 110px auto;
padding-top: 5px;
border-radius: 2px;
padding-left: 15px;
padding-top: 50px;
}
<div class="contentBox">
<div class="contentSection">
<h2> We have TeamSpeak!</h2>
</div>
</div>
I am currently making a website without using framework however I have run into a problem. My divs are not getting centered within the container even though the container itself is centered in the body.
Html
<body>
<div id="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Css
#content{
width: 90%;
height: 100%;
margin: 0 auto;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
The divs are perfectly centered when I have my window to full width, but once I resize it, they just reorganize without centering.
Before resizing:
http://cl.ly/image/241R2I24280w/Screen%20Shot%202014-09-26%20at%2021.49.23.png
After resizing the window: http://cl.ly/image/2y2g2W0n230g/Screen%20Shot%202014-09-26%20at%2021.50.21.png
I have tried different methods to solve it, such as doing margin: 0 -10%; and margin: 0 25%;
When it comes to positioning I get confused.
Thanks.
Just change your CSS like this, this way you can adapt your boxes in many ways and they will react to responsive layouts as expected:
#content {
width: 90%;
height: 100%;
margin: 0 auto;
text-align:center;
display:block;
}
.box {
width: 45%;
height: 150px;
display:inline-block;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px 2%;
}
See fiddle here
Explanation:
I have removed your floats, used block elements and replaced your fixed sizes by percentages. Then, I used a text-align:center property in your container box #content so everything is nicely aligned in the center of that container. Now, if you resize, columns will take 45% of the width of the screen, but you can obviously change the behavior via media queries and use something like .box{display:box} for small screens
There are multiple solutions to your problem. Depending on what you have inside those boxes this might be the simplest one: text-align:centerwith a display:inline-block combo; See here.Fiddle
2 solutions :
You can use a percentage for the width your boxes.
#content{
width: 90%;
height: 100%;
margin: 0 10%;
}
.box{
width: 30%;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Boxes will resize with the content but the stuff in the boxes might look weird in small sizes.
Or
You can use a pixel value for the width of your content.
#content{
width: 1200px;
height: 100%;
margin: 0 10%;
}
.box{
width: 400px;
height: 150px;
float: left;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin: 13px;
}
Width of boxes will not change while resizing, nor the stuff in it, but that can be painful on small screens.
add auto margin for your box
.box{
width: 400px;
height: 150px;
border: 1px solid #c8c8c8;
border-radius: 3px;
margin-top: 13px;
margin-left:auto;
margin-right:auto;
}
I made your files on my machine and the divs are not centered so I assume your screen or resolution settings are different, or your content container is within one or more other divs?
Anyhow, try adding 'clear:left;' in your box class code and it should resolve your issue (put it just above the 'float:left' line. good luck!
I've got an issue when i try to put 2 divs, both them them floating to the left side, one with width 80% and the other the 20%. Then i'd like to draw a border on the right side of the first div and a box-shadow of 5px, because each div has a different color.
So I've just searched on this site and i've found this solution:
Border issue in Floating div
But it's bad idea IMHO.... i've a resolution of 1920px width and i can't put 48% for the width of a DIV.... for 4px border i'll got a white space in the webpage for the 2% - 2px.
You could say, just add the background color to the body: i could because each DIV has already it's own, but it's also a problem OF SPACE, PROPORTIONS!!!
Another problem i'm experiencing with: i've set the height 100% (on the second div, 20% width)and it works in the example; but in the real website, which is the height also set to 100% the DIV doesn't occupy the whole height of the column but just until the margin limit of the last image.
The last problem: box-shadow with floating div it's bad idea...
should i put the box-shadow on the last div, just for the left side, instead of the right side for the previous div?
Look at my code here http://jsfiddle.net/9gp6J/
div#contenuto_body{
margin: 0 0;
padding: 0 0;
float: left;
width: 80%;
height: 100%;
background-color: #C90;
-moz-box-shadow: 0 0 5px 1px #333;
-webkit-box-shadow: 0 0 5px 1px #333;
-ms-box-shadow: 0 0 5px 1px #333;
box-shadow: 0 0 5px 1px #333;
border-right: 4px solid #E6B800;
}
body{
margin: 0 0;
padding: 0 0;
}
div#ads{
margin: 0 0;
padding: 0 0;
width: 20%;
float: left;
height: 100%;
background-color: #CCC;
}
div#ads img{
width: 70%;
max-width: 200px;
display: block;
margin: 25% auto;
}
You could use the css3 feature calc(...) available in css3 depending on which browsers you are supporting this may suitable. Anything below IE9 doesn't support this so keep that in mind. Here's a fiddle:
http://jsfiddle.net/9gp6J/9/
Any other solution would have to involve negative margins such as:
div#contenuto_body{
...
margin-right: -4;
}
That should work anything IE7 and up.
for the border issue add a div inside the left div and give a right border to that inner div. This way the outer left div can remain 80% without the added 4px border problem.
HTML:
<div id="container">
<div id="left">
<div id="inner_left">
content left
</div>
</div>
<div id="right">
content right
</div>
</div>
CSS:
div#container {
height:200px;
}
div#left {
float:left;
width:80%;
height:100%;
background:red;
}
div#inner_left {
border-right:4px solid black;
height:100%;
}
div#right {
float:left;
width:20%;
height:100%;
background:green;
}
Check this jsfiddle
I searched for this but I can't seem to find a similar case that had an answer to it. Sorry if it has been addressed previously.
I have a section of a html page that looks, on a basic level, like this:
<div id=wrap>
<div id=lb>
Content
</div>
<div id=rb>
Content
</div>
</div>
These basically break up my body into a left section (LB) and a right section (RB).
With corresponding CSS (Not showing a CSS Reset, but a generic one is in use as well; ... indicate other code is present but N/A):
#bwrap {
width: 100%;
height: 400px;
display:inline-table;
...
}
#lb {
width: 71.5%;
display: table-cell;
...
}
#rb {
width: 28.5%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
}
I started right to left and filled in content in #RB; everything was perfect. However as soon as I started working in #LB I noticed that all my content within #RB shifted down to line up with the bottom of #LB's content. Even though the content nor the DIV overlaps.
The specific content that did this was a google calendar embed into #LB.
Everything looks completely normal except the shift down in #RB.
Anyone know where I went wrong? I tried to mess with floats and absolute positioning but none of it had any effect, most of it actually made the situation worse.
Use this
vertical-align: top;
Live example http://jsfiddle.net/wfyVy/
It's jumping down because the extra padding and border you have defined to rb is adding to the overall width of the container, making it no longer 28.5%. Try this:
#lb {
width: 70%;
display: table-cell;
...
}
#rb {
width: 20%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
oveflow:hidden;
}
Update: if changing it to the css above is not enough, try adding a float: left to both ids above.
When you use paddings in elements with width % values, the paddings adds to the width value. Try reducing a little bit the width to get a correct proportion.
Don't use display: table-cell, it's ugly and doesn't work consistently on all browsers, You should be able to do fine with floats and widths.
Also using padding or margins on the same element as an element that has a width defined is not a good idea, again browser incompatibilities make it a nightmare to work with.
I suggest you do something like:
<div id="wrap">
<div id="lb">
content
</div>
<div id="rb">
<div id="rp">
more content
</div>
</div>
</div>
with css:
#wrap {
width: 100%;
height: 400px;
display: block;
...
}
#lb {
width: 71.5%;
display: inline; //not actually necessary
float: left;
...
}
#rb {
width: 28.5%;
display: inline; //again not necessary
float: right;
}
#rp{
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
padding: 30px 6px 7px 6px;
}