I want these two text fields to be in the center of the page (horizontally and vertically)... What's wrong with my code?
<div style="vertical-align:middle; height:100%">
<center>
<form action="register.php" method="post">
Desired Username: <textarea type="text" name="user_username" style="width:60%;"></textarea><br>
Desired Password: <textarea type="text" name="user_password" style="width:60%;"></textarea><br>
<input type="submit" name="submitButton"/> <button name="Register">Register</button>
</form>
</center>
</div>
<center> is deprecated. Use CSS to center horizontally instead. For example, you can add text-align:center on the container and text-align:left on the element in question, or margin:0 auto for fluid width elements.
vertical-align:middle; only really makes sense for table cells or elements set to display:table-cell;. If you were trying to center an image or one line of text, it would be as easy as setting the line height of the element equal to its height.
Since we're looking at something a bit more complicated here, you just need to experiment a little. I threw this together:
html, body {
height:100%;
text-align:center;
}
form {
position:absolute;
width:100%;
top:50%;
margin-top:-1em;
}
I used -1em because if, for example, I had two lines of text, 1em would be half the height of the block that those lines occupy. Since inputs are about the same height as a normal uppercase character, give or take a few pixels, 1em should give you about half the height of the block that those inputs occupy.
You can center by giving your main content div fixed dimensions and then using margin: 25% auto; The auto will center it horizontally and the percentage should center it vertically.
Edit: Here is a better solution for vertically align that I have used in the past, you set a parent div with a height of 50% and negative margin bottom that is half of the content height.
So for example :
#parent {float:left; height:50%; margin-bottom:-50px;}
#child {clear:both; height:100px; position:relative;}
<div id="parent">
<div id="child">
Content
</div>
</div>
From this source
Putting it inside a table worked! apparently that property works for tables not divs..
<div style="height:100%; text-align:center;">
<table height="100%" style="height:100%;">
<td height="100%" style="vertical-align:middle; height:100%;">
<center>
Related
I'm going to put 4 divs in a 100% width container side-by-side.
I saw this question and it was useful.
But my problem is that while using that solution, divs are stick to each other, but I need a little margin/space among them.
For example support a child div like this:
<div class="introwrapper"
style="width:25%;height:100%; float:left; margin-left:5px;">
</div>
Actually, I want to make these 4 divs placed side-by-side and make a space of 5 pixels between them, for the rest of the space remaining, make their width equal and the make the sum of widths of all these 4 divs and all 3 5px margins 100%.
How can I make this type of alignment?
I'm sorry for the confusion. I though a technique would work, that I have used frequently for centring objects, however it didn't.
Unfortunately, the only thing I can think of right now is an additional layer of containers/wrappers.
Essentialy:
Container width: 100%
Inner container: width: 25%;
Your object div padding-right: 5px; no width. It will be set automatically through the display: blockproperty, that a div has by default.
Here is the solution:
(Please note that sx.png is a 10x10 px transparent placeholder).
<div style="height: 160px; width: 100%; box-sizing:border-box; display:table;">
<div class="introwrapper" style="height:100%; width:25%;display:table-cell;">a</div>
<img src="../_imgs/sx.png" />
<div class="introwrapper" style="height:100%; width:25%;display:table-cell;">b</div>
<img src="../_imgs/sx.png" />
<div class="introwrapper" style="height:100%; width:25%;display:table-cell;">c</div>
<img src="../_imgs/sx.png" />
<div class="introwrapper" style="height:100%; width:25%;display:table-cell;">d</div>
</div>
I have a <div> called big box that contains another <div> called small box. Each small box contains an image and text wrapped inside a separate <div> I also have a diagram to explain my situation.
http://s21.postimg.org/4thwzlt9j/Untitled.jpg
The problem is when the text is larger than the div wrapping it. If I create another small box, It will overlap the above small box.
How can I modify the CSS so if the elements such as the text go over the <div> the small box won't overlap it.
http://s18.postimg.org/kqkqlp6w9/Untitled.png
I don't want to use margin because it is fixed. What happens if one small box has only 3 words of text and there's a huge margin at the bottom?
How can I make it dynamically, so if the text is bit over, the second small box won't overlap it but will instead adjust it's size so it will be at the bottom with space?
.bigbox {height: 700px;
width: 950px;
background:#FFFFFF;
border-style:solid;
border-color:#D5DADA;
border-width:1px;}
.smallbox {text-align:center;
height:300px;
width:250px;
background: #FFB236;
position:relative;
left:0px;top:0px;
margin-bottom: px;}
.imagebox img{margin:6px 6px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;}
My HTML
<div class="bigbox">
<div class="smallbox"><div class="i"><img border="0"src="im.jpg" alt=""> </div>This is the text and it is wrapped inside a div. </div>
<div class="smallbox"><div class="imagebox"><img border="0"src="im.jpg" alt=""> </div>This is the text and it is wrapped inside a div.</div>
Simply removing the height attribute of the .smallbox worked for me.
The problem with specifying a fixed height is that it simply does not allow the div to expand such that all the content fits inside.
If there is more content than what the div can hold, it overflows. The overflow can be visible or hidden depending on how you specify it, but it does not change the layout and does not act as content.
http://jsfiddle.net/wtBUd/
Im wanting to align 3 divs together, but i want the left div to stretch 100% left, the right 100% right with the middle div having a fixed width.
Basically I'm trying to create a header for my website with the logo in the middle and the background seemingly stretching out forever but the logo has transparency so I can't just overlay one ontop of the other.
I have done this using tabels at the moment like below but wondered if there was a better (css) way of doing it?
The Real issue being that the background of the logo in the center of the banner needs to be transparent so i cant have any overlapping divs?
Here is my example done using the following method but would prefer to use CSS if possible?
LINK: example
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
<th scope="col"><img src="style/images/header_logo.png" width="122" height="123" alt="Header_logo"></th>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
</tr>
</table>
I don't know if this method will work for what you are trying to achieve, but you can horizontaly center the image and then apply a background color, so it will cover the background image. You shouldn't be using empty elements, they are semantically incorrect. It's up to you though.
Take a look at this codepen.
This should work for you:
<style type="text/css>
#left, #right{
position:absolute;
top:0px;
width:50%;
height:50px;
}
#left, #headerpattern_left, #rightsticky{
left:0px;
}
#right, #headerpattern_right, #leftsticky,{
right:0px;
}
#headerpattern_left, #headerpattern_right{
position:absolute;
background:url(pattern.png) repeat-x;
width:45%;
}
#leftsticky, #rightsticky{
position:absolute;
}
#logo{
position:relative;
width:50px;
height:50px;
margin:0px auto;
}
</style>
<body>
<div>
<div id="left">
<div id="headerpattern_left">
</div>
<div id="leftsticky>
<img src="correctly_measured_image_of_pattern_on_left_side_of_logo.jpeg" />
</div>
</div>
<div id="right">
<div id="headerpattern_right">
</div>
<div id="rightsticky>
<img src="correctly_measured_image_of_pattern_on_right_side_of_logo.jpeg" />
</div>
</div>
<div id="logo">
</div>
</div>
</body>
EDIT: new suggestion
Off the top of my head, you could create two divs within each of the left and right divs and create a jpeg of how the pattern should look 100px either side of the logo and have them stick right next to the logo, then use the same repeating background on the divs next to the jpegs.
This should work in most cases, but in a few instances it will not look perfect, such as if the webpage is viewed on a gigantic screen or zoomed out quite far. Also, I'm not sure how it will look on mobile devices.
I have a problem as I mentioned above.
In my web app, I'll be generating many divs dynamically by jQuery(ASP.NET MVC).
Each new div can have a different width, and all of them MUST be floated to the left
I tried (test) to float to the left 2 divs, but with no success. What am I doing wrong ?
Each div has a defined width, because when the total width of all divs > mainDIV's width, then the scrollbar will appear. Now, in that case, this 2 divs are not floated to the left
Here's the code
<div id="mainDIV" style="overflow:auto; width:100%;">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
You have to make sure that the containing div is wide enough to accommodate the floated div's side by side.
So in your example, you would have to set the width of the containing div mainDIV to at least 1920px.
You need an additional wrapper if you want the scroll-bars to appear on mainDIV:
html:
<div id="mainDIV" style="overflow:auto; width:100%;">
<div id="wrapper">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
</div>
css:
#wrapper {
width: 1920px;
}
I'd try to use CSS in a way that doesn't have to do style= for each element. Without more context and/or testing I can't guarantee it will fix your problem, but its possible it will and its better form.
Either set float:left for all div tags
div {float:left;}
put all div tags to be floated left in the same class
<div class="className" style="width:960px; background-color:Red;">
a
</div>
div.className {float:left;}
Also, make sure you do not specify any kind of absolute position as this will override the float. There appear to be some subtleties concerning float and width, so check those out too http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/
I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.