So i'm having trouble entering the element with the middle class. So the container box-block-head-yellow had a width of 100% so that it can span any container, the class middle is using display inline-block so that the container wraps around it's content you can see the markup below.
<!-- Markup for container -->
<div class="box">
<div class="box-block-head-yellow">
<div class="box-title-block middle">
<h1 class="box-title">Latest projects</h1>
</div>
</div>
</div>
So the issue i'm having is the middle container isn't centering in the middle. With the following styles on each element.
Parent element
Child element
Result of element not being entered horizontally
Adding the following CSS to your box-block-head-yellow class can solve the center alignment issue.
.box-block-head-yellow {
width: 100%;
text-align: center;
}
.middle {
display: inline-block;
}
Related
I have a container with 3 children elements.
<div class="container">
<img />
<div class="element1"></div>
<div class="element2 bottom"></div>
</div>
They must be positioned as shown on the diagram below:
image is in the top of the left column and nothing goes below it (it is the only element in the left column)
element1 is in the top of the right column
element2 is stick to the bottom of the right column (and must not collide with the element1 which is above it)
Does somebody know how to achieve such layout using pure CSS? Ideally I wouldn't like to add any markup, but I can do that if that's the only possible way.
The biggest problem I'm facing here is how to stick that second element (non-image) to the bottom of the container without removing it from the flow. Because if I use position: absolute and remove it from the flow, the elment above it can collide with it (both elements have unknown height).
Here's a pen to work on: http://codepen.io/anon/pen/yNwGvQ
I would suggest you to use two columns in your html and then use the property display: flex; for your right column as suggested in the article A Complete Guide to Flexbox.
http://codepen.io/AlexisBertin/pen/QboYyY
All the HTML:
<div class="container">
<div class="column column-left">
<div class="image">This is an image</div>
</div>
<div class="column column-right">
<div class="element1">This container has dynamic content so it's height is unknown and may change.<br/><br/> Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</div>
<div class="element2">This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
Part of this CSS:
.column {
float: left;
height: 100%;
}
.column.column-left { width: 100px; }
.column.column-right {
width: calc(100% - 100px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
Hope you get the idea. Good Luck'.
EDIT:
The easiest way to achieve this without declaring height to the container seems to only create a third parent div to the first block of the second column and define it as flex: 1; while the second block of this same second column would be define as flex: 0;.
http://codepen.io/anon/pen/yNwZmJ
More details explained in the comments.
The easiest solution I figured out is this one:
First you create this CSS:
.container {
width: 400px;
padding: 10px;
border: 1px solid red;
background-color: white;
}
.container > img {
float: left;
}
.container > div {
position: relative;
overflow: auto;
padding-left: 5px;
min-height: 120px;
}
.container > div > .bottom{
position: absolute;
bottom: 0;
display: block;
}
And then use these divs, depending on your content. The first one you use when you know your text is short:
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
</div>
<div class="bottom">
<p>This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
The second one you use when you know your text is long
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
<p>Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</p>
</div>
<div>
<p>This container also has dynamic content so it's height is unknown and may change</p>
</div>
</div>
</div>
The difference is that you remove bottom class from the last div in your div that has long text.
Also in your CSS you can see .container > div{... min-height: 120px; ...}, you should set it to height of your image. In case you want the bottom text more down then you have to increase min-height to be bigger than your image height.
Here is it in action: http://codepen.io/anon/pen/YXgBXx
my page is structured like this:
When I load images in the 2nd div, only the inner div is extended, the parent is not. this is quite bothering, since the parent div has a border all arround. but the child2 div extends over it, outside the parent. both are set to relative and have min-height set to a value. Simplified version of the page:
<div id="parent">
<div id="child1">
</div>
<div id="child2">
<br/><br/><br/><br/><br/><br/><!--here come the images-->
</div>
</div>
here's the example: http://jsfiddle.net/TGCPn/1/
how can I make it that it will automaticaly extend?
Try removing the fixed width on the #parent and then adding display: inline-block on #parent
#parent
{
display: inline-block;
min-height:100px;
border:solid 1px;
}
Demo
Try <div style="width:auto"> on the parent div
So I have a div which looks like
<div id="socialMediaBarHomepage">
<div id="homepageNewsLink">
<img src="" alt="" class="mr_10"/>
</div>
<div id="socialMediaHeaderBar" class="fl_right">
<div id="headerMediaStayConnected" class="fl_left mr_5">
A bit of Text
</div>
<div id="headerMediaIcons" class="fl_left">
Image Image Image
</div>
<div>
So I have 1 Main div, with 2 sub divs.
1 Floating Left and 1 Floating right. Its basically a bar for my homepage.
On the left I display an icon and a newslink
On the right I display a label and social media icons.
What I am trying to do is simply vertically align middle everything in this bar, but can't even get close. Any ideas on how to get this done ?
CSS
#homepageNewsLink a, #homepageNewsLink img { float: left; }
#headerMediaIcons ul { margin: 0px;}
#socialMediaBarHomepage { display: table; }
#homepageNewsLink { display: table-cell; vertical-align: middle; }
#socialMediaHeaderBar { display: table-cell; vertical-align: middle; }
vertical-align CSS property applies only to TD tag and if I remember well some inline objects alignment (like images).
What you can try is to set explicit height of parent div and use on sub-divs margin-top and margin-bottom with value auto
You can also use display:table-cell on parent div and stick to vertical-align.
I have one Parent div. Top of the Parent div contains two child divs. How can i give third child div below the first child div
<div class=parent1>
<div class=child1>some text</div> /*this is in top left of the parent div */
<div class=child2>some text</div> /*this is in top right of the parent div */
<div class=child3>some text</div> /*how can i write css for this div come as left bottom*/
Using the css float will work if you are willing to assign a fixed width to your div's.
<style>
div.parent1 {
width: 800px;
}
.child1 {
float: left;
width: 400px;
}
.child2 {
float: right
width: 400px;
}
.child3-container {
clear:both;
text-align: right;
}
</style>
<div class=parent1>
<div class=child1>some text</div>
<div class=child2>some text</div>
<div class='child3-container' >
<div class=child3>some text</div>
</div>
</div>
You can put jQuery to use to do the job easily. Use the eq() selector of jquery to get you the desired div:
$('div#parent div:eq(1)'); // gets second div inside a div with id parent
How can i give third child div below
the first child div
If I get you, you want to add another div after the first child div, you can again use eq and after selector for that:
$('div#parent div:eq(0)').after('<div>Some Content</div>');
Update:
Here is the demo I created for that
The idea is that parent div should be positioned relative and child divs absolute and then using top, left, width and height properties.
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.