I'm trying to put 2 divs beneath each other like this:
div 1
div 2
This is how far i've gotten in the HTML-file:
<div width="100%" z-index:"1">
<div id="username-full">
<div id="username-form">
<input type="text" name="username" id="username-input" placeholder="Username" />
</div>
<div id="username-text">
<p>Username:</p>
</div>
</div>
</div>
<div width="100%" z-index:"1">
<div id="passwd-full">
<div id="passwd-form">
<input type="text" name="passwd" id="passwd-input" placeholder="passwd" />
</div>
<div id="passwd-text">
<p>Password:</p>
</div>
</div>
</div>
And this is my CSS-file:
#username-full{
text-align:right;
float:right;
clear:right;
}
#username-text{
float:right;
margin-right:5px;
}
#username-form{
float:right;
margin-top:13px;
}
#passwd-full{
text-align:right;
float:right;
}
#passwd-text{
float:right;
margin-right:5px;
}
#passwd-form{
float:right;
margin-top:13px;
}
Fiddle
As you see, i've tried using the z-index, i've tried to give the 2 divs a width of 100% and i tried using float. Also, I've tried using positioning, but that also didn't work. I'm out of guesses :(.
Greetings,
Luuk
Based on your code, try adding this line:
#passwd-full{
clear: both;
}
I'm guessing, but have a look at this:
#passwd-full {
...
clear: right;
}
Demo
If you want two divs 100% with each and one above the other, you should try:
<div id="One">My first content</div>
<div id="Two">My second content</div>
#One, #Two {width: 100%; clear: both;}
Related
What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
I am designing a page, which has 2 left-sided tables (one below another), one more table on the right and block of text in the middle. Here is what I've tried:
CSS:
#left {
float:left;
padding-right: ;
}
#right {
float:right;
}
#center {
margin-left: ;
margin-right: ;
}
#text {
width:60%;
margin:0 auto;
}
HTML:
<body>
<div id="left">
<table style="width:; background-color:#>
...
</table>
<table style="width:; background-color:#">
...
</table>
</div>
<div id="right">
<table>
...
</table>
</div>
<div id="center">
<div id="text">
<h>My text goes here</h>
</div>
</div>
</body>
The central part (text) appears in the middle of the page, but it is right UNDER those three tables (left- and right-sided), not between them... How do I fix it?
Thank you!
why are you using float? put the div#center between div#left and div#right. Give your body a width. Now give div#left, div#right, div#center widht=33.33%, it should work. try it out.
Figured it out:
<div style="width: 70%;">
<div style="float: left; width: 20%;">Table1 and Table 2</div>
<div style="float: left; width: 60%;">My Text</div>
<div style="float: left; width: 20%;">Table3</div>
<br style="clear: left;" />
</div>
Found out there is more efficient way by using CSS3 Multi-column layout
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Bootstrap has a framework, just apply .col-md-N to your divs
http://getbootstrap.com/examples/grid/
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;
I'm trying to align four elements like this:
||=|| B
||A|| C
||=|| D
A is an image, and the other three elements are div tags. All elements have a class of span_2 with the following CSS:
.span_2 {
width: 50%;
display: inline-block;
}
However, this gives me the following layout:
||=|| B
||A||
||=||
C D
I know I can set float:left on all four elements, to get what I want, but I'm wondering if there is any other CSS way?
Thanks!
You could put the B C D elements in a container div with the same class span_2.
Example:
<img src="image.jpg" class="span_2" />
<div class="span_2">
<div class="span_2">B</div>
<div class="span_2">C</div>
<div class="span_2">D</div>
</div>
For correct alignment you'll need to add vertical-align: top; to the class, too.
Here's an example: http://jsfiddle.net/cCU89/1/
Here you go.
HTML
<div id="LeftHold">
<img src="#">
</div>
<div id="RightHold">
<div class="Right" id="B"></div>
<div class="Right" id="C"></div>
<div class="Right" id="D"></div>
</div>
CSS
#LeftHold{
width:100px;
height:100px;
float:left;
}
#RightHold{
width:100px;
height:100px;
float:left;
}
.Right{
width:100px;
height:25px;
}
I hope that helps!
Without Float
You can use a table! :)
Below is my code :
<div id="footer">
<div id="left_footer">
<div id="img_left" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
<div id="right_footer">
<div id="img_right" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
</div
CSS:
#footer {
width:500px;
position:relative
}
#left_footer{
float:left;
}
#right_footer{
float:right;
}
I am trying this code but my image is not aligned to center its always aligned to left in left footer and to right in right footer. Please suggest !
I would approach the layout like this:
http://jsfiddle.net/yWmZ5/1/
HTML
<div id="footer">
<div id="left_footer">
<img src="http://placekitten.com/100/100" />
</div>
<div id="right_footer">
<img src="http://placekitten.com/100/100" />
</div>
</div>
CSS
#footer { width:500px; position:relative; overflow:hidden; }
#left_footer{ width:250px; float:left; text-align:center; background:orange; }
#right_footer{ width:250px; float:right; text-align:center; background:yellow; }
Make sure you strip all styling (eg - align, etc) out of your HTML and put it in your CSS.
Try this style:
#footer > div{width:50%}
your div#left_footer and div#right_footer need to have some width, in order to display the content in the middle
change your corresponding css to this:
#left_footer{
text-align:center;
float:left;
width:50%;
}
#right_footer{
float:right;
width:50%;
}
see this fiddle