I have up to 4 divs on the page that will have to 'sit next to' each other horizontally. Each div will have 100% width.
All, but the first one, will therefore appear off the page until I style it otherwise (ultimately using jQuery).
How can I style the divs in order to achieve this?
Markup:
<div class="wrapper">
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
</div>
What I've Tried
I've tried floating all of the divs left and setting the overflow of 'wrapper' to hidden. I've tried setting the display to inline-block of all the divs. I've tried position absolute on all the divs. I'm trying a combination of different things just hoping it'll work but there has to be a proper approach to this.
Tell me if some like this is what you want i use display:inline-block
http://jsfiddle.net/fdXLb/
Then i can do a better explanation.
if one div has a width of 100% there will be no space for another div to align next to this one.
so I would say to align them use only 20% width.
25% works also for 4 divs but then you can not use any borders, margin or padding.
also you can set a min-width in px.
have a look at this example: http://jsfiddle.net/3CpL8/
may it helps
.wrapper > div {
width:20%;
background-color:orange;
height:60px;
float:left;
min-width:100px;
margin:5px;
}
A nice trick is to use white-space: nowrap; to prevent divs moving to the next line. This is what your css would look like:
.wrapper {
white-space: nowrap;
overflow-x: hidden;
}
.wrapper > div {
width:100%;
background-color:red;
height:60px;
display: inline-block;
min-width:100px;
margin:5px;
}
Check out this Fiddle and use your browser's inspector it to see that the divs are still there, but off screen at the width you want. I assumed you'd want to continue using overflow-x: hidden; on the parent div so there wouldn't be an ugly scrollbar when doing the javascript side :)
Related
My pages are structured as nested divs. They have padding and margin so inner divs are typically physically smaller than outer divs. However, in some cases I would like one of the inner divs (red box in the image below) to expand widthwise to match the left and right edges of the outermost div.
<div id="div-a">
<div id="div-b">
<div id="div-c">
<div id="div-d">
</div>
</div>
</div>
</div>
This is just an example -- the number of nested divs can vary. The width of the outermost div is variable. The heights of all the divs are also variable.
I have tried using absolute positioning, but this removes div-d from the document flow. Since I don't know the height of its content, I can't compensate. Any other suggestions? Thank you for any help.
#div-a {
position:relative;
}
#div-d {
position:absolute;
left:0;
right:0;
}
Could this approach be a solution?
#div-c {
position:relative;
}
#div-d {
position:absolute;
padding:0 -(div-c + div-b + div-a padding values) 0 -(div-c + div-b + div-a padding
values)}
#div-c {
display: flex;
align-items: center;
}
#div-d {
width: calc(100% + PADDINGS + BORDERS);
}
PADDINGS: sum of each parents divs padding.
BORDERS: sum of each parents borders.
Unfortunately I could not find a CSS-only solution for my particular problem. I had to resort to Javascript.
wrap the div that needs to be full-width with another div
<div id="div-a">
<div id="div-b">
<div id="div-c">
<div id="div-d-wrapper">
<div id="div-d">
</div>
</div>
</div>
</div>
</div>
use this CSS
#div-a {
position:relative;
}
#div-d {
position:absolute;
left:0;
right:0;
}
apply the following Javascript (using jQuery)
$('#div-d-wrapper').height($('#div-d').outerHeight());
div{
padding:10px;
border: 1px solid red;
}
#div-d{
margin-left:-32px;
margin-right:-32px;
}
i used hard code values to for the given div . My solution is to use Negative margins in css. When the div grows dynamically, you use javascript or jquery to find parent reach from child div and calculate the margins accordingly.
fiddle demo: https://jsfiddle.net/bqrxtLvd/
Source:
Negative margin css tricks
Detailed negative margin
The following layout 2 column layout will get screwed up by adding the <p>Hello</p>... Can anyone give me a clue?
<div style="width:1280px; font-size:0;">
<div style="width:640px; height:200px; background:blue; display:inline-block;">
<p>Hello</p>
</div>
<div style="width:640px; height:200px; background:yellow; display:inline-block"></div>
</div>
I could see if the height of the "p" was actually larger than 200px, but it isn't. So why doesn't it just go inside of its parent and stop messing with my layout?
To fix this, I ended up making the layout column divs relative, and using the absolute position on a child div that would be the container of the "p", but it seems like there is something obvious I am missing to make this situation simpler...
Inline-block does leave some whitespace that is undesired most of the time do to spaces in your code. The best solution I think is to float it and use 50% for the width.
div {
float: right;
width: 50%;
height: 200px;
background:blue;
}
the p tag will go in nicely.
example here on jsfiddle
other solutions and information here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Inline block items are vertically aligned as baseline by default. Add vertical-align:top
Jsfiddle Demo
div {
font-size:0; /* remove whitespace */
}
div div {
font-size:1rem; /* reset font-size*/
vertical-align: top;
}
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
I want to make a web page that uses 100% of screen space. I have two divs:
1st - menu with fixed width (~250px)
2nd - whats left
The misleading part for me is that the menu div is not in the 2nd div. They both are in a wrapper div (100% width). The problem is that if I write 100% width for the 2nd div, it goes below the menu. If I write less %, I cannot be sure how it will be displayed in smaller resolutions.
Is there is some negative sizing or something? ATM. 1st div floats left and 2nd div float right.
UDPATE: here is some code:
div.main {
width: 100%;
}
div.1st {
width: 250px;
float: left;
}
div.2nd {
width: 100%; #here should be the space that is left in the main div#
float: right;
}
<div class="main">
<div class="1st">menu</div>
<div class="2nd">content</div>
</div>
Problem: content could be as wide as it needs to so if string or objects in it is big enough 2nd div goes below 1st. Menu width is fixed.
UPDATE #2: if i leave content width empty then it will also goes below menu since content is wide enough
Take a look at this Post, there you have the correct solution:
http://www.alistapart.com/articles/holygrail
You could do something like this : http://jsfiddle.net/steweb/78x8y/
markup:
<div id="container">
<div id="left">Width=> 250px, float left</div>
<!-- following div takes automatically the remaining width, no need to declare further css rules -->
<div id="remaining">Width => the remaining space</div>
</div>
css:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#left{
float:left;
width:250px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Yes, you can determine the width of absolutely positioned elements by setting left and right. This makes the browser solve the equation in the standard for width. See this demo for an example.
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).