I have some basic CSS which im trying to make a post layout for a forum but i cannot get it to work.
I have one div 100% width with two floats below it side by side. They seem to never equal 100% width and so don't line up with properly.
Equally the parent div of the two floats does not expand if the floats expand and i do not know how to fix it.
This is what i have so far:
CSS
.parent{
width: 100%;
top: 10px;
position: relative;
clear: both;
color: black;
}
.line{
height:20px;
padding-left:10px;
lineHeight: 20px;
margin:0px;
border: 1px solid black;
}
.container{
width:100%;
text-align: center;
border-bottom:1px solid red;
}
.fleft{
float:left;
width:10%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
.fleft2{
float:left;
width:86%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
The HTML:
<div class="parent">
<div class="line">
<span style="float:left;">Test</span>
<span style="float:right;">Test 2</span>
</div>
<div class="container">
<div class="fleft"> Hello </div>
<div class="fleft2"> Hello Message</div>
</div>
</div>
JS Fiddle also provided:
http://jsfiddle.net/yMaqR/10/
I have one div 100% width with two floats below it side by side. They seem to never equal 100% width and so don't line up with properly.
You have to take into consideration the padding & margin. So if you add up width + padding + margin of the floated elements and they overflow the width of the parent, they'll be wrapped.
So a possible solution is to remove the padding and add it maybe to child elements.
Equally the parent div of the two floats does not expand if the floats expand and i do not know how to fix it.
The solution is to use a clearfix
More about floats and understanding how they work.
Related
I positioned divs relative and stacked them one below the other with fixed height. Next i am moving a div 20px up like top:-20px. the problem is for all the following divs i have to do top:-20, otherwise there is a gap of 20px. Is there a work around for this.
I have added a fiddle. http://jsfiddle.net/xS3Kt/
html
<div class="class1">hello</div>
<div class="class2">hello</div>
<div class="class3">hello</div>
<div class="class4">hello</div>
css
div{
hieght:50px;
position:relative;
width:100%;
}
.class1{background:#bbb;}
.class2{top:-5px;background:#999;}
.class3{background:#777;}
.class4{background:#555;}
here you can see there is a gap between 3rd div and fourth div. to correct it i have to position all the following divs. is there a work around
I think this jsfiddle answers the question. You need to add a wrapper that groups the divs you want to shift upward.
Html:
<div class="wrapper">
<div class="class1">hello</div>
<div class="class2">hello</div>
<div class="class3">hello</div>
<div class="class4">hello</div>
</div>
<div>hello</div>
Css:
div {
border: .1em solid rgb(0,0,0);
height:50px;
position:relative;
width:100%;
}
.wrapper {
height : auto;
margin-bottom: -5px;
top:-5px;
}
.class1 {
background:#bbb;
}
.class2 {
background:#999;
}
.class3 {
background:#777;
}
.class4 {
background:#555;
}
I need to show one big div with 3 divs inside it. The layout has to be fluid, i.e. the height of the big div must adapt to the contents of the 3 divs inside it. Moreover, I want the 3 divs have the same height, and I managed to do that with display:table property for the container div and display:table-cell property for the 3 inner divs. Nevertheless, there is a big problem: as soon as I put a div with a margin-top: inside the first of the three divs, it shifts downwards the content of the other two divs.
I really cannot understand why, any help would be much appreciated.
Here is the html and the css code:
<div id="body">
<div id="left-box">
<div id="left-container">
LEFT LEFT LEFT LEFT LEFT LEFT
</div>
</div>
<div id="central-box">
<div id="central-container">
CENTRAL CENTRAL CENTRAL CENTRAL CENTRAL
</div>
</div>
<div id="right-box">
<div id="right-container">
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
</div>
</div>
</div>
CSS:
#body {
width:80.9%;
margin:0 auto 0 auto;
height:auto;
/*background-color:#0F3;*/
display:table;
}
#left-box {
height:100%;
width:60%;
background-color:red;
display:table-cell;
border-right:1px solid #000;
}
#left-container {
background-color:#0CF;
width:72%;
margin-top:82px;
margin-left:2%;
}
#central-box {
background-color:#00F;
display:table-cell;
border-right:1px solid #000;
width:20%
}
#central-container {
margin-top:0px;
float:left;
background-color:#FF0;
}
#right-box {
background-color:#0C0;
display:table-cell;
border-right:1px solid #000;
width:19%;
}
#right-container {
margin-top:0px;
background-color:#FF0;
}
Try using vertical-align on the divs, for example something like this:
div {vertical-align:top;}
it is a similar phenomenon as with inline-block elements we discussed here
here I put your code + vertical-align on jsfiddle
I am trying to make a series of DIV elements sit side by side. Howeever i am running into problems
HTML:
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
CSS:
#comic{
height: 563px;
width: 1000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
.comic_panel{
width:1000px;
height:563px;
position:relative;
float:left;
background:orange;
}
However the result I get is simply the DIVS displaying under neath one another.
Your divs are too wide to fit side by side in the container. Try giving them a width of 200px:
.comic_panel{
width:200px;
height:563px;
position:relative;
float:left;
background:orange;
}
If you want for a scroll bar to appear, use white-space:nowrap; on the container and display:inline-block on the children.
Here is a demonstration: http://jsfiddle.net/h2StP/show
Change the CSS to below,
.comic_panel{
width:6%;
height:563px;
position:relative;
float:left;
background:orange;
border:1px solid red;
}
and they should fall side by side.
Basically child divs have same width as parent , so there is no room for them to sit side by side.
DEMO
The reason is that each inner divs (.comic_panel) are using all the width of the parent container (#comic). Then, the next div can only be place right below the previous one.
If you tune up the widths, you can have your result.
For example, if you let the container div have any width, you would have all the inner divs side by side: http://jsfiddle.net/
body {
width: auto;
overflow: auto;
width: 10000px;
}
#comic{
height: 563px;
background: black;
margin: auto;
color:white;
overflow: visible;
}
.comic_panel{
border: 1px solid black;
width:100px;
height:63px;
float:left;
background:orange;
}
To make the inner divs not wrap, you need to either set the width of the body element to a proper value (to make space for all the inner divs) via a hard-coded width css property (as in the fiddle, but not the best approach) or via javascript (a better approach).
This post explains other approaches, using tables: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/.
BTW, you may not need the position: relative that you put there to achieve this effect.
Put the whole thing into a container div like this:
<div id="container">
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
</div>
The container div should be the same size as your 'comic' div was before:
#container {
height: 563px;
width: 1000px;
overflow: auto;
}
And the width of your 'comic' div should be 14000.
#comic{
height: 563px;
width: 14000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)
I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??
I have this as my CSS:
.wrapper{
margin:0 auto;
width: 80%;
display: table-cell;
}
.gridf{
float:left;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.gridl{
float:left;
margin-left: 3px;
width:200px;
min-height:200px;
border:1px solid white;
}
My HTML:
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Please help :D
Your wrapper is a percentage width container with 4 fixed-width child elements floated.
The width of the wrapper is dependent on the width of the viewport. If the viewport is narrowed to the point that the wrapper's width is less than that of the 4 child element widths together, then naturally they won't all fit and therefore will wrap.
The fix is to make sure your wrapper doesn't get smaller than the combination of the children.
So, add up with widths, borders and margins of the child elements and then give the wrapper a min-width attribute equal to that.
Hi i think you should this check to this demo
.wrapper {
margin: 0 auto;
width: 80%;
border: solid 1px red;
overflow: hidden;
}
.gridf,
.grid,
.gridl {
Background: green;
width: 24%;
min-height: 100px;
float: left;
margin: 2px 0;
}
.gridf {} .grid {
margin: 2px 1%;
}
.gridl {
background: yellow;
}
<div class="wrapper">
<div class="gridf">One</div>
<div class="grid">Two</div>
<div class="grid">Three</div>
<div class="gridl">Four</div>
</div>
Although this is an old post, I think that the problem, which I also run into, is the fact that you want all these cells to be of a fixed size, and not %, right? The solution you chose changed initial format where you specified width:200px;
Well, I would suggest to look here: http://jsfiddle.net/gn2bg/
The ONLY one thing I did is to add inner wrapper around your cells:
.inwrapper{
float:left;
overflow: hidden;
min-width: 830px;
}
and new html as this:
<div class="wrapper">
<div class="inwrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Notice that your wrapper requires 80% of space.
The inwrapper, however, tells that its size is fixed - 830px (total of all internal div sizes plus room for padding.)
This way inwrapper uses 'elbows' to stretch the width, and override these 80% of 'wrapper'
I understand that you already made decision as to what is your best solution. I am leaving this response to anyone else in the future who needs exact answer to your exact question.
You can try removing the table-cell display rule from the wrapper and setting percentages (or min-widths) on the child divs like this jsFiddle example.
That should do the trick :
<div class="wrapper">
<div style="width:850px">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
And that will be supported on any browser.
http://jsfiddle.net/5GrKU/3/
HTML
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
CSS
.wrapper{
margin:0 auto;
width: 80%;
display: inline;
}
.gridf{
float:left;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.gridl{
float:left;
margin-left: 3px;
width:20%;
min-height:200px;
border:1px solid red;
}
for you reference i have also added the URL of the demo. http://jsfiddle.net/sg8FE/
UPDATE
just change display:inline in wrapper class to display:block rest all is right and the div's are centered.
by giving a fixed width in your inner divs you are forcing them to have that width no matter what is the size of the view port. And giving the outer div a width of 80% you are shrinking its size with the width of your view port. You need to do either giving fixed width to all those divs or giving a relative width to all.
Ok, so I am trying to center a div with dynamic content (both its width and height are unknown because the text takes up unknown space and wraps an unknown amount of lines).
Per this post, I managed to center the div horizontally.
However when I apply the same principle to vertical centering, the block only moves 50% down (and doesn't move up at all).
JSFiddle of my problem here: http://jsfiddle.net/nMqJG/2/ ; as you can see, it is centered horizontally but not vertically...
Thanks and any help appreciated,
Edit: FYI, I am using FF10.0.2
If you don't need to support old browsers, use display: table-cell. Details here
HTML:
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT
</div>
</div>
CSS:
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
display: table-cell;
vertical-align: middle
}
.in{
border:1px solid #00F;
}
Fiddle: http://jsfiddle.net/nMqJG/25/
You need to be thinking in terms of %width and %height:
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
position:relative;
}
.in{
float:left;
width:100px;
height:100px;
margin:25%;
display:inline-block;
border:1px solid #00F;
}
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT
</div>
</div>
If you are using fixed pixel widths, then you are going to need to think about how your %margin will affect interior divs based on space constraints.
For example, you have a 200x200 container, with a 100x100 interior DIV. So if you move you interior div 25% away from the exterior, you are moving 200*.25 = (50px). 50+100+50 is 200 which is centering your interior div on all sides.
Will this work for you? (Borrowing code and adjusting from other answer)
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
position:absolute;
}
.in{
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
position: absolute;
display:inline-block;
border:1px solid #00F;
}
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT
</div>
</div>
Using absolute positioning and 25% on all top/left/bottom/down sides should get your inner div right in the middle regardless of the wrapper size or position on the page.