I have this code: http://jsfiddle.net/bUPWS/1/ but #div2 overflows #div1. How to bring the overflowed inputs next to the other ones?
<div id="div1">
<div id="div2">
<form>
<input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/>
</form>
</div>
</div>
#div1 {
width:400px;
height:100px;
border:1px solid red;
}
seeing your code i can say you are using <br /> tag so there is no possible way to bring your inputs next to each other. just remove each <br/> all your inputs will align properly.
additionally you can use min-height for your parent div div1
#div1 {
width:400px;
min-height:100px;
border:1px solid red;
}
#div2 input {display:inline; }
if your inputs increases more than the limit of 100px height your parent div will adjust the height with respect to the inputs inside your div2 block
EDIT: However to explain my comment below i have updated your fiddle example you can check how we can achieve it using <ul> <li></li></ul> tags
Fiddle example
Code if here!
HTML
<div id="div1">
<div id="div2">
<form>
<ul>
<li><input/></li>
<li><input/></li>
<li><input/></li>
<li><input/></li>
<li><input/></li>
</ul>
<ul>
<li><input/></li>
<li><input/></li>
<li><input/></li>
<li><input/></li>
<li><input/></li>
</ul>
</form>
</div>
</div>
CSS
#div1 {
width:800px;
min-height:100px;
border:1px solid red;
}
*{padding:0; margin:0}
#div2 ul{float:left; padding-left:10px; }
I'm not sure if this is what you looking for but you can set overflow:auto for div 1 and set float:left, for inputs. fiddle: http://jsfiddle.net/bUPWS/28/
Try using fieldset instad of div.
see: http://www.w3schools.com/tags/tag_fieldset.asp
Related
I want to use a fixed header, with the content behind it. The menu will contain anchor links, so all the content will be in one page.
But, I got stuck at an early stage. I thought this would be no problem, but it seems like the header div is snapped to the content div somehow. It looks like they have the same margin.
If position:fixed; is removed, it looks like it should, but I want it to be fixed.
I really don't understand why this happens, since they're separated from each other. Using something like margin-top:-100px doesn't feel right.
Doing this should work without ugly solutions...
CSS:
#header {
position:fixed;
width:1200px;
border:1px solid black;
z-index:1;
overflow:hidden;
background-color:white;
}
#menu {
width:100%;
z-index:2;
}
#content {
margin: 100px 0 0 0;
background-color:red;
overflow:hidden;
width:1200px;
z-index: -1;
height:100%;
}
HTML
<div id="header">
<h1>Header</h1>
<div id="menu"><ul>
<li>Works</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="works" name="works"></div>
<div id="news" name="news"></div>
<div id="about" name="about"></div>
<div id="contact" name="contact"></div>
</div>
<div id="footer"></div>
Add top: 0px; to your #header class
I'm trying to code more "responsive" after reading Ethan Marcote's A Book Apart.
I have come up with a case which I'm not sure how to solve. In a li element, I have four different divs. The first one cannot change width or height (I know this isn't responsive but the image size must remain the same within it). The other three divs can stretch as they are just text.
Now, I know I can set the divs to have different percentages of their parent width, which is fine, except for the fact that div1 HAS to be a defined pixel width. This throws out the calculations for the other percentages (browser width - 77px is going to be a different number for different browser sizes), so what shall I do?
I've whipped up this to help illustrate my problem.
As I mention, I realise I can use JS to set a container div's width on document load and resize but that seems, well, not so great.
Thanks for any help :)
Maybe table somethings can help
<!DOCTYPE html>
<html>
<head>
<style>
li { display: table; clear: both; width: 100% }
li div { display: table-cell; border: 1px solid blue; height: 1em }
.div1 { min-width: 65px; max-width: 65px }
.div2 { width: 60% }
.div3 { width: 10% }
.div4 { width: 30% }
</style>
</head>
<body>
<ul>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
</ul>
</body>
</html>
#garthen; As i understand your question is that you want one div have fixed width & other have dynamic widths. I did that by change the order of the divs
CSS:
li {overflow:hidden}
li div {border: 1px solid blue;}
.div1 { width:65px;float:left; background:red;}
.div2 {overflow:hidden; background:yellow;}
.div3 { width: 10%; float:right; background:green;}
.div4 { width: 30% ;float:right; background:pink;}
HTML:
<ul>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
</ul>
may be that's you want & it's also work IE also. If you want to give your 3rd & 4th div fixed width then also works well.
Check the demo for more http://jsfiddle.net/sandeep/4RPFa/67/
I'm displaying a list of links for voting, similar to Hacker News. I want the following layout for each link:
The gray boxes highlight the four divs for each link listed.
The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.
I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly. But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this. Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.
Any ideas?
Why not just put the two right containers in one?
<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
<div class="row1">Link headline text</div>
<div class="row2">other text</div>
</div>
<br class="clear" />
style:
.rank, .arrow, .content {
float: left;
}
.clear {
clear: left;
}
EDIT: Demo on jsfiddle
Solution 1
It seems that all four boxes for each item are in one bigger box (li maybe), so I would use:
<li>
<span class="num"></span>
<span class="upvote"></span>
<span class="main">main text</span>
<span class="add">more text</span>
</li>
and
.add { clear: both; float: right; }
Solution 2
Other solution would be padding on parent of each group of four and then negative margin-left together with float: left on number and upvote links.
Anything better can be tailored to your needs, but we need to see HTML :)
I'd go for a combination of the answers given by #Adam and #Czechnology, and use a list to display the content, and put the Link headline text and other text boxes into a single parent div. Like so:
HTML:
<ol class="headlines">
<li class="news-item">
<div class="rank">9</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
<li class="news-item">
<div class="rank">10</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
</ol>
Style:
ol.headlines {
display:block;
list-style-type:none;
list-style-position:outside;
margin:0;
padding:0;
}
div {
border:1px solid #00F;
}
ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
float:left;
}
.news-item {
clear:left;
}
ol.headlines h2,
ol.headlines .additional-content {
display:block;
}
You can find a sample of this here: http://jsfiddle.net/DEWtA/
Note that you'll need to alter the CSS to your needs with regards to the size of the divs and such.
Why not provide a wrapper element for the link headline text and the other text? Then float the wrapper instead.
http://jsfiddle.net/userdude/H3qPt/
HTML
<div class="linkblock">
<span class="score">100</span>
<span class="arrow">^</span>
<div class="linkdata">
<div class="linkurl">Link headline</div>
<div class="linktext">Other text</div>
</div>
<br/>
</div>
CSS
Some of this is just for demonstration.
.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
float: left;
}
.linkblock br {
clear: both;
}
div, span {
border: 2px solid #ddd;
margin: 4px;
padding: 3px;
}
div.linkdata {
border: none;
padding: 0;
margin: 0;
}
You can contain the those two things into divs and then for the left div with the voting stuff, label the div with a class, "vote", and have the following CSS:
.vote {
margin: 0 0 100%;
}
I haven't tested it, but it should work like a charm.
Caveat: Doesn't work well with responsive design :(
The best solution would probably be to wrap 'link headline text' and 'other text' within a 'div' and use 'overflow: hidden;' on it.
So I have a bunch of elements that need to have a specific width, height and padding and need to be centered within their parent element:
<div class="pages">
<a>Page 1</a>
<a>Page 2</a>
<a>Page 3</a>
</div>
How do I do this? I don't know how many elements there will be so .pages can't have a defined width so margin:auto; won't work.
In the stylesheet or style tag:
margin-left: auto; margin-right: auto
You can wrap all those in one single div and center this one, this will be the usual approach I believe.
<div id="wrapper" style="margin-left:auto; margin-right:auto">
<div id="page1"> ... </div>
<div id="page1"> ... </div>
...
</div>
If you have working code, please post it.
It sounds like what you're looking for is margin: auto on the elements you want to center, like so:
#my_div {
margin: auto;
}
CSS CODE
div {
display:table-cell;
width: 200px;
height: 200px;
vertical-align:middle;
background: red;
}
HTML CODE
<div>
Hello...This is Vertically Centered!
</div>
<div>
Hello...2!
</div>
<div>
Hello...3!
</div>
SAMPLE DISPLAY
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!
make one div that contains both
use float:right
example:
div#p8015buttons {
position:absolute;
bottom:0.5em;
right:0.5em;
width:90px;
}
div.p8015 {
float:right;
margin:1px;
}
Wrap both DIVs in a third one and position that one absolute instead of the original one.
Not tested, but this should do it.
HTML:
<div class="wrapper">
<div class="one">
Content
</div>
<div class="two">
More content
</div>
</div>
And the CSS:
.wrapper
{
position:absolute;
width: 500px;
height: 400px;/*whatever you want*/
}
.one,
.two
{
position:relative; /*or static*/
}
Hope it helps :)
Tested
HTML MARKUP
<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>
CSS
.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}
Try this one, you can then move style to your css
<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>