https://jsfiddle.net/ahqamm7o/1/
#parent {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
margin: auto;
width: 50%;
}
.menu {
float: left;
text-align: left;
width: 20%
}
I tried using techniques from CSS: center element within a <div> element but this does not seem to apply for DIVs with an 'inline-block' style.
Note 'inline-block' is not a requirement I have, I am just merely looking for the menu to float left and the content to be positioned directly to the side of it (with the content centered relative to 'parent')
I am trying to center 'content' relative to 'parent'
(that is, center 'content' as if 'menu' was not there).
If you specified the limited width then float:left is not needed, apply the text-align:center to the .content class so it will align the content center with in that particular div, if we use position:absolute the parent should be in position:relative.
You had some tag issues: An extra section tag, div tag.
To solve your issue I removed float: left from .menu and added:
position: absolute;
top: 0px;
left: 0px;
This will always position the menu on the left and the primary content will be centered as if the menu is not there.
Fiddle: https://jsfiddle.net/ahqamm7o/2/
Related
I have seen many questions on SO that are similar to this one but i haven't found a solution that fits for my situation.
What i have tried from the solutions i read is to set the height or minimum height of the left column to be equal to the height of the image or right column
via JS / Jquery but somehow it didn't work, i don't know why.
I have a relative positioned parent div which has two child divs (Columns). The first child div (left) is relative positioned and the second child div (right) is absolute positioned. The left child div has some text while the right child div has an image. The parent div's height goes as far as the left child div's height and it doesn't show most part of an image that's in the right child div.
How can i make the parent div expand to the height that's equal to the image inside the right child div.
The layout is extremely important so i can't change it. Both Css and JS / jQuery is welcomed.
HTML
<div class="parent" id="parent">
<div class="leftcolumn">This is the left Column</div>
<div class="rightcolumn"><img src="somelinkhere"></div>
</div>
CSS
.leftcolumn
{
width: 25%;
position: relative;
}
.rightcolumn
{
width: 75%;
position: absolute;
right: 25%;
}
For what you are actually trying to achieve, using absolute positioning is probably the least flexible ways.
If you are using a grid system I suggest you use it, but below is a HTML & CSS only "quickfix" using floats.
img {
width: 25%;
/* for testing so we can see where image would be */
height: 50px; background: #ccc;
}
.textcolumn {
width: 75%;
}
.container {
margin-bottom: 20px;
}
/* clearfix to make each container fully contain its floated elements */
.container:after {
content: "";
display: table;
clear: both;
}
/* alternate the display between odd & even containers */
.container:nth-child(odd) img{ float: right; }
.container:nth-child(odd) .textcolumn { float: left;}
.container:nth-child(even) img{ float: left;}
.container:nth-child(even) .textcolumn{ float: right; }
<div class="container">
<div class="textcolumn">This is the text block that will float to the left </div>
<img src="somelinkhere">
</div>
<div class="container">
<div class="textcolumn">This is the text block that will float to the right</div>
<img src="somelinkhere">
</div>
I tried to make a text inside a div, I made code saying: text-align:center; and padding:30px 0px; but padding is NOT working..the text just stays at the top of the div, but should be in the center..(from top to bottom).
Maybe is it because of the div's position absolute??
I don't know, please help me
Since the div's position is absolute, You can use the top, bottom, left, and right attributes to add a padding around the div.
text-align: center; is used for horizontal alignment.
For vertical alignment, there are other methodologies you should use. Take a look at this link, it gives you all different bits and pieces:
https://css-tricks.com/centering-css-complete-guide/
.container {
position: absolute;
text-align: center;
padding : 30px 0;
}
Your css may be look like above css code. If you given absolute position for the div you are removing the flow of the div from the dom tree. so its width may be shrink to the content of the text width. So you need to mention the width for the div as below. it will work jsfiddlelink
.container {
position: absolute;
text-align: center;
padding : 30px 0;
width: 100%;
}
Why don't you use line-height: [height of div]?
.container {
position: absolute;
height: 100px; (or anything else)
line-height: 100px; (must be the same as the height)
text-align: center;
}
Then it should be centered. I Hope I helped! :-)
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
I have two elements, both with display: inline-block, and the parent has white-space: nowrap.
When the screen is resized, the div on the right side don't resize, like this.
I'm trying to make only the blue div resize.
Full source (jsfiddle)
The structure of the html is like this:
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
<article>...</article> <!-- blue -->
</div>
Relevant css:
* {
box-sizing: border-box;
}
div.container {
margin: 0 auto;
max-width: 40em;
padding: 0;
white-space: nowrap;
}
div.container > * {
white-space: normal;
}
.aside {
display: inline-block;
max-width: 15em;
vertical-align: top;
}
.article {
display: inline-block;
max-width: 25em;
}
Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:
What I've found is that setting position: relative on the .container
and position: absolute on the .article does what I want.
An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.
The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.
And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like
article {
background-color: #a0f4ec;
display: inline-block;
position: absolute;
right: 0;
left: 30%;
}
div.aside {
background-color: #faf;
display: inline-block;
max-width: 15em;
width: 30%;
}
This trick also applies in a vertical sense, but with height, top and bottom properties.
There are a few ways to do it.
Method 1:
two divs the same line, one dynamic width, one fixed
Method 2 (negative margins)
http://alistapart.com/article/negativemargins
Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.
What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.
Simplified fiddle
If anyone can explain why, I'll mark it as an answer.
I want to define a class such that to which ever element I apply that class that element gets horizontally centred in its parent container.
The class can be applied to img , iframes or divs each of which could be of different size.
Is it possible to have such one class for all of them?
And how can achieve this probably the solution would require setting right, left margins automatically equal to each other and according to the size of the elements and left over space? But how that can be achieved.
Closest I have been able to reach is this but it doesn't work:
.centreThis{
margin: 0 auto;
max-height: 964px;
max-width: 680px;
overflow: hidden;
border: 10px solid #ddd;
}
Using a combination of CSS rules to address various elements:
.center {
width:auto;
text-align:center;
margin-left:auto;
margin-right:auto;
position:absolute;
left:50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
}
This will center align p, img, div and iframe elements, and others. Here's the full demo.
You can use this centered class:
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
Work for:
<div> tag;
img tag
iframe tag
JSFIDDLE
EDIT: if you put some text right inside <div> with that tag, the text will not center, cause you don't have setted text-align: center property.
HOW CAN I CENTER TEXT INSIDE CENTERED DIV?
Simple, just add a <p> element inside that div and CSS:
.centered p {text-align: center;}
Try using text-align: center; on a container element and display: inline-block; on a child element that you want to center.
Also, note that the margin: 0 auto; method only works when you have a defined width.