Please take a look at this jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/#base
I would like <div class="client"> to "inherit" <div class="contact">'s height (Both inner div's to have the same size)
Keep in mind that the content on both <div class="client"> or <div class="contact"> will dynamically change. So, there's no way to know a predefined height. HOWEVER, <div class="client"> will always have 2 or 3 lines.
HTML
<div id="conteiner">
<div class="client">Name: <br/>Phone:<br/>Emergency</div>
<div class="contact">
Contact 1<br/>
Contact 2<br/>
Contact 3<br/>
Contact 4<br/>
Contact 5<br/>
Contact 6<br/>
Contact 7<br/>
Contact 8<br/>
</div>
</div>
CSS
#conteiner {position: relative;}
#conteiner div {
display: inline-block;
border: 2px solid red;
vertical-align: top;
height: 100%;
}
#conteiner .client {
width: 200px;
}
#conteiner .contact {
width: 400px;
}
=== EDIT (07/12/2012) ===
Final jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/
Thank you #christofer-vilander !!!
Just this once, I'd recommend using <table> as you are in fact making a table. :)
How about using display: table; and display: table-cell; and make them behave like table elements?
Something like this - demo
If I am not wrong, then you want client div and contact div height should be same one.
Please use below code for the same :-
$(document).ready(function(){
$('.client').height($('.contact').height());
});
Please check and let me know in case of any help or concern.
Regards,
Durgaprasad
height:100%; only works when the parent element has a set height. You can do something like this: http://jsfiddle.net/TpWNY/2/
#conteiner {
position: relative;
height:200px; // set height of container.
}
#conteiner div {
display: inline-block;
border: 2px solid red;
vertical-align: top;
height: 100%;
overflow:auto; // allow the div to scroll if necessary.
}
#conteiner .client {
width: 200px;
}
#conteiner .contact {
width: 400px;
}
Related
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
I've been trying to achieve this for hours and I'm not quite getting it to work, so here it goes nothing:
I have this site:Site HomePage
composed by this HTML elements:
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
</div>
</div>
<div id="midcontentwrap">
<div id="leftwrap">
<div id="left">
</div>
</div>
<div id="midwrap">
<div id="midleft">
</div>
<div id="midright">
</div>
</div>
<div id="rightwrap">
<div id="right">
</div>
</div>
</div>
</div>
What I need is:
- When the browser window is resized, either left and right columns stay where they are and the MID COLUMN RIGHT SIDE needs to go below MID COLUMN LEFT SIDE.
My CSS file is pretty simple by now and this is the only major thing I need to do as the window size changes.
Thanks in advance for any help.
Yep, you're going to want to use media queries. Here's a JSFiddle of it in action.
Resize the display iFrame of the Fiddle back and forth past 500px width to view the results. I spruced up your HTML a little, too, to make it more modern (sorry):
HTML:
<section class='contentWrap'>
<aside>
This element corresponds to the element on the far left of the image you linked to.
</aside>
<div class='mainContent'>
<article class='left'>
This element corresponds to the mid-left element in the image you linked to.
</article>
<article class='right'>
This element corresponds to the mid-right element in the image you linked to.
</article>
</div>
<nav>
This element corresponds to the element on the far right side of the image you linked to.
</nav>
</section>
CSS:
.contentWrap {
width: 100%;
}
.contentWrap aside {
display: inline-block;
width: 25%;
height: 200px;
border: 1px solid purple;
}
.mainContent {
display: inline-block;
width: 45%; /* only because the borders are upsetting the percantages */
height: 200px;
border: 1px solid gray;
vertical-align: top;
}
.mainContent article {
border: 1px solid #00cae9;
margin-bottom: 2px;
}
.contentWrap nav {
display: inline-block;
width: 25%;
height: 200px;
border: 1px solid orangered;
vertical-align: top;
}
#media screen and (min-width: 500px) {
.contentWrap {
width: 500px;
margin: 0 auto;
}
.mainContent article {
display: inline-block;
width: 47%;
vertical-align: top;
}
}
NB: if you're viewing it on a super small screen, it won't work; that's JSFiddle's problem.
Oh fun, an excuse to have a play with CSS Media Queries!
DEMO: http://jsfiddle.net/Vn2QY/1/
CSS
#midcontentwrap {
min-width: 500px;
}
#leftwrap, #midwrap, #rightwrap {
float: left;
min-height: 400px;
}
#leftwrap, #rightwrap {
min-width: 100px;
width: 25%;
background-color: #15a;
}
#midwrap {
width: 50%;
background-color: #45a
}
#midleft, #midright {
width: 50%;
float: left;
}
#midleft {
background-color: #a45;
}
#midright {
background-color: #4a5;
}
#media all and (max-width: 500px) {
#midleft, #midright {
width: 100%;
}
}
The key piece here is the final part of the CSS. It basically states that "for all media (screen, printing, etc) when the browser width is less than 500 pixels in width, change the styling for #midleft and #midright and make them 100% of the available width."
By increasing their widths their existing float styling will force them on to new lines.
Try this DEMO
I'm guessing your want to get a fluid/responsive design. This should work for you.
Use float:left and min-width
To solve this problem....use % value for all div id width
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}
I have this issue I can't find a solution for it:
I have 3 divs, two of them are located inside the third.
The div which contains the others has a percentage width.
The second one which is inside the first, doesn't have a specific width and is floated to the left.
The third which is also inside the first does have a specific width and is floated to the right.
The question is how would I make the second div take as much width as possible??
Because it fits the contents as default.
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>
<style>
#a{
width: 80%;
}
#b{
width: ??;
float:left;
}
#c{
width: 50px;
float:right;
}
</style>
arrange your divs like this
<div id="a">
<div id="c">456</div>
<div id="b">123</div>
</div>
and remove the float from #b
#b{
background-color:#06F;
}
check the jsFiddle file
Working jsFiddle Demo
You should put your fixed element before the other one:
<div id="a">
<div id="c">
FIXED ELEMENT
</div>
<div id="b">
FLEXIBLE ELEMENT
</div>
</div>
And in CSS:
#a {
width: 80%;
background: green;
overflow: hidden;
}
#c {
width: 50px;
float: right;
background: yellow;
}
#b {
margin-right: 50px;
background: pink;
}
Floats aren't a great choice for layout purposes, since that's not really what it was designed for. If all you're looking for is to have 2 elements side-by-side and not the other aspects of float, I recommend the table* display properties instead:
http://cssdeck.com/labs/tbarj05i
#a{
width: 80%;
display: table;
}
#b{
display: table-cell;
}
#c{
width: 50px;
display: table-cell;
}
I would suggest giving #C a percentage value instead of pixels, or find out the total width and set it to that minus 50px.
Also did you try width:100%?
width: 100% for B is his container's width, hope this illustrates:
<html>
<head>
<style>
div{ border: solid 1px #ccc;}
#a{
width: 80%;
}
#b{
width: 100%;
float:left;
}
#c{
width: 50px;
float:right;
}
</style></head><body>
<div id="a">
<div id="b">DIV B
</div>
<div id="c">DIV C
</div>
</div>
</body>
</html>
This is my HTML
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
How can I get this image by using only CSS? I guess with float, but how can I get the fifth div next to the first one?
Changing the HTML is NOT (!) an option.
My first comment would be that class names can't start with a number, so I really hope that you can edit the HTML for that. To answer your question ignoring this fact, if each element has a class, this is pretty simple. Just do this:
div {
float: left;
width: 200px;
height: 100px;
border: 1px solid #000;
display: block;
clear: left; }
div.5 {
float: none;
clear: none;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/mvwSL/
You have a few options:
Float and negative margins:
.five{float:right; margin-top:-500px;}
Demo
Or margins only
.five{margin:-500px 0 0 200px;}
Demo
Or relative positioning:
.five{position:relative; top:-500px; left:200px;}
Demo
Or absolute positioning:
.five{position:absolute; top:0; right:0;}
(Make sure the container is set to position:relative;)
Demo
First, classes with numeric values are not valid. You're quite screwed if you can't change them... With proper classes, a solution might be:
CSS :
div {float:left;clear:left}
div.c5 {float:right}
jQuery
$("div.c5").insertBefore("div.c1")
See this fiddle
#Wex
div:last-child{
float: none;
clear: none;
display: inline-block;
}
Try below: It works as you required but horizontally, you want vertically. But am sure it might help you.
#outer {
width: 500px;
margin: 300px 0 0 10px;
}
.inner {
background-color: red;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
<html>
<body>
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
</div>
</body>
</html>