I would like to layout my website header with an image to the left and some text aligned at the bottom left ...
...or bottom right.
...or even better, have the image DIV height perfectly fit in the parent DIV :
...
Unfortunately I cannot get past this :
I am approaching this in two parts. The first part is to float my two inner elements left with a simple :
float:left;
on both inner DIVs.
Then with the second inner DIV I am playing around with position
position:fixed;
right:0;
However if I also add bottom:0 then I get something like this :
The second DIV has jumped outside of the outer DIV. How do I make it so that the positioning is relative to the parent DIV? I have tried position:inherit/absolute/fixed and nothing seems to work. Do I have to set something on the parent DIV?
Here is my JSFiddle: http://jsfiddle.net/c0gjq2fb/8/
Is there something I am not understanding right? Is there a take home message? I never seem to understand HTML/CSS layouts no matter how hard I try :(
You can use Flexbox
.outer {
border: 5px solid red;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.inner2 {
align-self: flex-end;
border: 5px solid green;
}
img {
border: 5px solid blue;
}
<div class="outer">
<img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
<div class="inner2">Some text</div>
</div>
The border is messed up cause of the height: 100%; value. If you remove the border, it's fine.
http://jsfiddle.net/j9p78a91/
add
position:relative;
top:220px;
to css class .inner2.
.outer {
border-style: solid;
border-width: 5px;
border-color: red;
width: 100%;
height: 280px
}
.inner1 {
border-style: solid;
border-width: 5px;
border-color: blue;
float:left
}
.inner2 {
border-color: green;
border-style: solid;
border-width: 5px;
float:right;
position:relative;
right:0;
top:220px;
}
<div class="outer">
<div class="inner1">
<img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
</div>
<div class="inner2">
Some text
</div>
</div>
Related
I have an outer div and 2 inner divs - one left-alignd and another is right next to it. The issue I am having is that the left div is shorter then the right and then right wraps around the left.
Below is my html and CSS:
<div id='green'>
<div id="orange">test</div>
<div id="red">
Effects<br/>
Add Class<br/>
Color Animation<br/>
Easing<br/>
Effect<br/>
Hide<br/>
Remove Class
Show
Switch Class
Toggle
Toggle Class
</div>
</div>
and here is CSS:
#green {
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange {
width:185px;
border:10px solid orange;
float:left;
}
#red {
border:5px solid red;
width: 100%;
display: block;
}
My question is how can I prevent the right div from wrapping around the left? Preferable without setting a margin on the right div.
I also want the red div to always be on the right of the orange div, never going under it or wrapping around it, even if the page is resized or if the page is viewed on a mobile browser
You can use flexbox for this. Using the following changes to your CSS above:
#green{
display: flex;
align-content: top;
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange{
align-self:flex-start;
width: 185px;
border:10px solid orange;
}
#red{
width: 100%;
border:5px solid red;
}
If you want #orange to be the same height as #red, remove align-self: flex-start
Demo: http://codepen.io/anon/pen/YwOjyP
I got it working by adding display: inline-flex; to #green.
Look: https://jsfiddle.net/4k1ohc10/
By the way, you didn't ask for a specific browser, so you can check this page: http://caniuse.com/#feat=flexbox
I want to have a block on the left and a box which contains text to its right, but I don't want the text that wraps to drop under the block. It should stay with the confines of a rectangle that is adjacent the block. This is how a table would behave, but I'm not sure what the best way to accomplish this outside of one is.
I hope this fiddle will clarify: http://jsfiddle.net/bernk/Ck7cj/
<div class="container">
<div class="block">BLOCK</div>
<div class="text">This is a text box that wraps onto at least two lines</div>
</div>
Instead of floating you can use display:table-cell:
jsFiddle example
* {
box-sizing: border-box;
}
.container {
width: 200px;
border: 1px solid black;
overflow: auto;
}
.block {
display:table-cell;
width: 70px;
height: 20px;
background: red;
color: white;
text-align: center;
}
.text {
border: 1px solid red;
display:table-cell;
}
I am getting a little gap between child-div and its parent-div. Is it possible for child-div to on its parent-div height? or (the way around)possible if the parent-div can scope the height of its child-div for not to overlap or get some extra spaces.
I have a DOM like this:
<div class="parent-div">
<div class="parent-image">
</div>
<div class="child-div">
</div>
</div>
here is my CSS:
.parent-image:{
height:60px;
}
.parent-div{
border: 1px solid #E3E3E3;
border-radius: 4px 4px 4px 4px;
margin-bottom: 20px;
width: 100%;
}
.child-div{
????
}
If you specify height: 100%; it will take the height of the parent.
If your child has padding, you need to change its box-sizing.
.child {
padding: 10px;
box-sizing: border-box;
}
If your child has more content than the parent, you either need to tell it to scroll, or hide. Note that on some browsers the scroll-bar will be inside the div, and on other browsers, it'll be on the outside.
.parent.c .child {
overflow: auto;
}
or
.parent.d .child {
overflow: hidden;
}
Demo of All
In your CSS, you can set your child-div to:
.child-div{
height:100%;
}
Here is a demonstration: http://jsfiddle.net/Xq7zQ/
I have a div with unknown height, though in this example I'm using 3px. I want to center the button but it seems to always offset by some arbitrary amount. I could do an absolute positioning trick dynamically once I know the height but I would prefer a css solution if possible.
<div style="width: 100%; height: 3px;">
<div class="special">
<input type="button" />
</div>
</div>
div{
height: 100%;
overflow: visible;
}
.special{
position:relative;
text-align: center;
padding: 1px;
border: 1px solid red;
}
input{
height: 100%;
width: 100px;
min-height: 8px;
}
The idea is that with the min-height the button will overflow evenly over the top and bottom of the div.
jsfiddle
You can get this to work by doing the following:
CSS:
div {
height: 100%;
overflow: visible;
}
.special {
text-align: center;
border: 1px solid red;
position:relative;
}
input {
position:absolute;
margin-top:-4px;
margin-bottom:-4px;
top:0px;
bottom:0px;
width:100px;
min-height:7px;
}
Note the input declaration in particular. Instead of height:100% I used position:absolute with top:0px and bottom:0px. This will set the height to 100%. It needs to be position of absolute so that you can do margin-top:-4px and margin-bottom:-4px to get the overlap. You can see that it works for any height of the outer <div/>.
The JSFiddle below has some added controls so you can change the height of the .special <div/> without needing to refresh.
http://jsfiddle.net/bmyAW/8/
I have two divs contained within a larger div and I'd like them to be laid next to each other. My approach was to float the first div left and set Overflow: hidden on the containing div.
For some reason it's not working and the 2nd div ends up ontop of the first.
Herse is the demo, http://jsfiddle.net/9xmDP/. I have some color coding which I was using to try and debug the overlapping. The code is also below. The signup form should be next to the login form instead of on-top of it.
HTML
<div id="container">
<div id="signupDiv">
<div id="signupLabel">
SignUp
</div>
<form id="signupForm">
User <input type="text" name="user"><BR/>
</form>
</div>
<div id="loginDiv">
<div id="loginLabel">
Login
</div>
<form id="loginForm">
User <input type="text" name="user"><BR/>
</form>
</div>
CSS
#container{
overflow: hidden;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
border: solid pink 1px;
}
Try this css. fiddle here
#container{
width:604px;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
width:300px;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
float:left;
border: solid pink 1px;
}
You need to float:left #loginDiv as well. See your updated fiddle here:
http://jsfiddle.net/9xmDP/2/
When you float an element, it is removed from the normal content flow, and any content in its parent element and other children of the parent tries to wrap around it.
So the signupDiv is indeed floated to the left, which puts it on top of the non-floating loginDiv. The content in the loginDiv does try to wrap around the signupDiv, but since you've specified both elements to be 300px wide, there's no room for it, and so it must go below the floating div instead.
The simplest solution is to float both divs, like this:
#signupDiv, #loginDiv {
float: left;
}
You can place the divs next to each other, by making them both float.
If you make the container 605px, then the divs will fit in there (including the border)
#container{
width: 605px;
overflow: hidden;
}
And this
#loginDiv{
float: left;
width: 300px;
border: solid pink 1px;
}
Diplay:inline will also do the trick here..
http://jsfiddle.net/9xmDP/4/
#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}