I need to align two div's inside a parent div.
The parent div should take up the page width with a margin on both sides.
The 1st child div should be 100px wide with a 4px margin. The 2nd Child div has to take up the rest of the space with a 4px margin on the right.
How do I write the CSS for this? I have written this so far
div.parent {
width: ?;
border:1px black solid;
position: relative;
clear: both;
}
<div class="parent">
<div class="child1"> </div>
<div class="child2"> </div>
Why not just add the margin to the parent div?
<div style="height: 100px; width: 100%; padding: 4px; background-color: Yellow;">
<div style="height: 100%; width: 100px; background-color: Lime; position: relative; float: left; border: solid 1px black; border-right-width: 0px;"></div>
<div style="height: 100%; width: 100%; background-color: Red; border: solid 1px black; border-left-width: 0px;"></div>
</div>
Related
I got an overflow hidden container (scrollable) and within a couple of tiles with custom dropdowns for better touch usability.
The problem: I can't get the dropdown list shown above the overflow hidden grandparent:
<div id="overflow">
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
</div>
#overflow{
height: 190px;
width: 200px;
border: 1px solid black;
overflow: hidden;
}
.tile {
clear: both;
margin: 10px 0 0 10px;
width: 180px;
height: 50px;
position: relative;
border: 1px solid green;
z-index: auto;
}
.absolute {
position: absolute;
left: 20px;
bottom: -20px;
width: 50px;
height: 30px;
border: 1px solid red;
background: red;
z-index: 99;
}
https://jsfiddle.net/enmwmtw8/
Any ideas how to achieve this?
This can't be achieved in this way. As whatever is in the overflow: hidden container can't be shown outside of it.
The only way to do this would be to place the dropdown outside the container
<div>
<div style="float: left; border: 1px solid green;">Left Text</div>
<div style="text-align: center; border: 1px solid red;">Center Text</div>
</div>
Note: The first div always should be in left. The second div should be in center of the page.
If you want to align horizontally the two inner divs into the parent one, don't use float.
Try to add
display: inline-block;
width: 45%; /* example */
And then text-align: center on the parent.
Although I am not sure I understand your question completely, I think this is what you are looking for:
.container {
width: 100%;
}
.left {
float: left;
width: 25%;
z-index: 2;
border: 1px solid green;
position: absolute;
top: 8px;
left: 8px;
}
.center {
float: left;
width: 100%;
border: 1px solid red;
text-align: center;
}
<div>
<div class="container">
<div class="left">Left Text</div>
<div class="center">Center Text</div>
</div>
</div>
I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it's width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111 get's preformatted for some odd reason.
The code:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
I recommend using two divs floated.
On the right one, place the middle and the right divs.
All that is done via floats:
HTML:
<div class="left">content for the left</div>
<div class="rightContainer">
<div class="right">right content</div>
<div class="middle">middle content</div>
</div>
CSS:
.left {
float: left;
width: 100px;
overflow: hidden;
min-height: 30px;
background: red;
}
.rightContainer {
float: none;
min-height: 30px;
overflow: hidden;
background: yellow;
}
.right {
float: right;
width: 100px;
overflow: hidden;
min-height: 30px;
background: blue;
}
.middle {
overflow: hidden;
min-height: 30px;
background: green;
}
example:
UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/
This can be solved by specifying the style word-wrap: break-word; for your center fluid div.
Browsers don't work well with word-wrapping. Anyways I hope this code brings some help:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
</div>
First: paragraph elemements are block-level elements. Google it to learn more. So if you want it to not overlap with the other You must float it as well.
so include this in the header (or separate file - or inline if you want):
<style type="text/css">
p {
float:left;
}
</style>
Then rearrange your divs:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
I have 2 nested divs as
<div id="header">
<div id="logo"></div>
<div id="header_r"></div>
</div>
The css is
#header{
border: 1px solid;
width: 900px;
border-radius: 10px;
min-height: 100px;
}
#logo{
border: 1px solid;
width: 400px;
border-radius: 10px;
min-height: 80px;
float: left;
}
#header_r{
border: 1px solid;
width: 500px;
border-radius: 10px;
min-height: 80px;
float: left;
}
It gets arranged one below the other. How do I get them side by side?
Close the tag on the header-r div
You need to close the tag on the "header_r" div
<div id="header">
<div id="logo"></div>
<div id="header_r"></div>
</div>
Reduce width for logo and header_r by 2px each because border is also included in width of an element.
Given the following HTML
<div style="width: 500px; height: 500px; border: 1px solid red;">
<div style="width: 200px; height: 100px; border: 1px solid green; float: right; vertical-align: bottom;">
</div>
</div>
I would like the inner div to lock into the lower right hand corner of the outer div. What do I need to do CSS wise to make that happen?
Thanks!
John
position is your friend
<div style="width: 500px; height: 150px; border: 1px solid red; position: relative">
<div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
</div>
</div>
<div style="position:relative; width: 500px; height: 500px; border: 1px solid red;">
<div style="position:absolute;right:0px;bottom:0px;width: 200px; height: 100px; border: 1px solid green;">
</div>
</div>
Give that a try. Short version: position:relative on the outer div, position:absolute on the inner div and tell it you want the inner div to be 0 pixels from the right and bottom edges of the parent container.