I want the second child div to stay on the same line as the first div no matter how much a browser window is resized. Both images are parts of the header (the green div). I have tried to follow other questions asked on here and tried whitespace:nowrap, float:left, changing blocks from inline to inline-block and back, and nothing has helped.
I want to learn, the simplest, cleanest way to implement this, without using hacks, because after reading a bunch of tutorials I obviously still don't understand how this works.
<div style="background:green;">
<div style="display:inline-block;">
<img src="" width=150 height=80>
<br>
Some text
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
Try this:
<div style="background:green;position: relative;">
<div style="display:inline-block; position: absolute; left: 0; top:0;">
<img src="" width=150 height=80>
Some text
</div>
<div style="display:inline; position: absolute; left: 50%; top: 0;">
<img src="" width=728 height=90>
</div>
</div>
Here you can use the flex property.
<style>
body{
display:flex;
}
.container{
width:100%;
display:flex;
flex-direction:row;
}
.container > div{
width:50%;
background:#ccc;
border:thin solid #000;
}
</style>
<!doctype html>
<html>
<body>
<div class="container">
<div>
your first image here
</div>
<div>
your second image here
</div>
</div>
</body>
</html>
I have found a stupidly simple solution: it's to include two parent divs instead of one. The first one has flexible width and serves for filling the entire top of the screen with header background/color. The second one is fixed width, wide enough to contain both images. This second container "traps" both images inside the fixed width and does not allow them to carry over.
The first sub-container is inline block (so I can include "Some text" under it), and the second one is regular inline. This way I can add padding or margins to the sub-containers.
I am not a programmer and realize this solution may be frowned upon, but it's the only one that worked :) No floating left/right, absolute positions, white-space nowrap or div clear was required!
<div style="background:green";>
<div style="width:1000px;">
<div style="display:inline-block; padding-left:15px; padding-right:40px">
<img src="" width=150 height=80>
<br>
Text under the header
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
</div>
Related
I have the below HTML in this fiddle http://jsfiddle.net/v6E9a/ .The issue is that the footer is overlapping with the body.If I change the body position to relative then it all lines up correctly but I need to have absolute there to support some other functionality.
I m really not that good with CSS.Can someone please have a look at the html and tell me how i can line the head body and footer correctly.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative ;border : 3px solid red">
<div class="globalHeader">
header
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute ;border:3px solid blue">
main data
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative ;border:3px solid green">
footer
</div>
</div>
Absolute take up no space, and that's why the footer is on top. There are many ways to work around this. if your main fx, have a fixed height, you can add that value as a margin-top to your footer.
fixed-main height fx 400px
pageFooterSection gets a margin-top of 400px
i used many ways to make a flexible height to the divs and the whole page but no way .
what i want to do is :
i have 2 columns in the page after the header (right_side , left_side)
the both left and right sides will contain flexible content .
so i need the height of the both columns be flexible.
also want the right side height depends on the left side because maybe the article will be taller than the right content ..
i tried "height" and "min-height" but no way
this is my code
<html style="min-height: 100%;">
<body style="min-height: 100%; width: 980px; border-right: 2px solid black;
border-left: 1px solid black; margin: 0 auto;">
<div><img src="header.jpg"/></div>
<div id="content" style="min-height: 100%">
<div id="right" style="background: red; float:right; width: 280px; min-height: 100%;">my flexible right content</div>
<div id="left" style="background: blue; float:left; width: 700px; min-height: 100%;">
<p>my flexible article </p>
<p>my flexible article </p>
</div>
</div>
</body>
</html>
Try this: http://jsfiddle.net/mcfarljw/erdH7/
You're going to need to use some divs in divs to get the effect of having one column flexible with another if you want it pure CSS and HTML. You can do something like this for the html format.
<div id="container2">
<div id="container1">
<div id="col1">
</div>
<div id="col2">
</div>
</div>
</div>
I'd highly recommend you move your CSS styling into the head using references to the divs or put them in a seperated linked CSS file altogether.
Based on: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
I am trying to create my own website from scratch, now i ran into a problem considering the HTML/CSS bit.
I am trying to create this standard "header, navigation, content" layout where the header is at the top, the navigation is at the left and the content starts below the header and to the right of the navigation
I use the following piece of code:
<div id="head">
<img src="..." id="logo" style="float:left">
</div>
<div id="nav">
{some elements}
</div>
<div id="content">
{some elements}
</div>
But as soon as the "style='float:left'" is added to my code, the "content" and "nav" DIV automatically moves to the right of the "head" DIV, is it possible somehow to make the "head" DIV "reserve" the remaining space, so that the "content" and "nav" DIV wont move up to the right of it, but stay below?
This problem is called "Collapsed Parent". To prevent this you must clear float.
Add this CSS to your style sheet:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
And add the class "clearfix" to your header, like
<div id="head" class="clearfix">
<img src="..." id="logo" style="float:left">
</div>
For more information on clearing floats you can check out this url - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php
<div style="width:250px;">
<div id="head" style="width:100%; border:1px solid red;">
<img src="..." id="logo"> Header-Logo
</div>
<div id="nav" style="float:left;width:47%;border:1px solid blue;">
Navigation-Left
</div>
<div id="content" style="float:right; width:50%;border:1px solid blue;">
Content-Right
</div>
</div>
-I think the reason is "float:left" inside tag id="head". Because you want to put the header in the top of website so no need to use "float:left" for it.
-You can use "float:left" for tag id="nav" and "float:right" for tag id="content"
Here is the result: http://jsfiddle.net/4JgA4/119/
=> No need to notice to all my information inside some tags (Just for decorations :D)
Clearing the floats will do.
You need to add a class to your div and in your css as below:
.clear
{
clear:both;
}
Add overflow:hidden to the #head element. I don't know why it works, but it ensures that all floated elements are contained inside the parent.
I have markup that looks like this
<div>
<h1 style="text-align:center;" >Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
Content goes here
</div>
The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.
If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.
One way is to add a right padding to the div with the size of the logo:
<div style="padding-right: 50px;">
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
<div>
Content goes here
</div>
Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.
<h1 style="position: absolute; width: 100%; text-align:center;">
Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
Content goes here
</div>
Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.
So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"
<div>
<h1 style="text-align:center;">Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="
text-align:center;
margin-left:auto;
margin-right:auto;
width:50%;
">Heading 2</h1>
</div>
<div style="clear:both;">
Content goes here
</div>
I know i am late for the party, but for future readers I found a different approach for that problem.
use 3 div elements (left div,middle div, right div) inside a flex displayed div container.
make the left and right div the same relative width (in %) and float each one of the to his side.set the middle div width with reminder of 100% - (left div + right div).
locate the image in the left div (or right div if your direction is RTL).
set the text align of the middle div as 'center'.
check this example. also here is a Plunker .
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
#editorheader {
display:flex;
}
#leftheaderdiv {
float:left;
width:20%;
background-color:gray;
display:inline-block;
}
#middleheaderdiv {
float:left;
width:60%;
background-color:red;
display:inline-block;
text-align: center;
}
#rightheaderdiv {
float:right;
width:20%;
background-color: gray;
}
</style>
</head>
<body>
<div class="subheader" id="editorheader">
<div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
<div id="middleheaderdiv">I AM IN THE MIDDLE</div>
<div id="rightheaderdiv"></div>
</div>
</body>
</html>
If you are really using logo image then you might try this solution:
<div>
<img style="float:left;" src="logo.jpg"/>
<h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1>
</div>
where -100px replace with half of yours image width.
edit:
idea with absolute position from littlegreen's answer is working. Check it:
<div style="position:relative;">
<img style="float:left; position:absolute;" src="logo.jpg"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
This most simple solution:
<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>
= the logo width
Cross-browser CSS that works to allow both left and right align of text on the same line?
Example (where each text quote should be aligned as far left or right as possible, respectively):
stuff on the right stuff on the left
No float's answer's please.. unless there is a way to make the text not break out of the parent div/container in a multicolumn css page...
With container tags:
<div>
<p style="float: left">stuff on the left</p>
<p style="float: right">Tstuff on the right </p>
</div>
With inline tags:
<div>
<span style="float: left">stuff on the left</span>
<span style="float: right">Tstuff on the right</span>
</div>
float:left for the one on the left, and float:right for the one on the right. Or absolute/relative positioning. Pretty sure both work across the main browers.
Let's assume this is the HTML code:
<div>
<div id="left" style="float: left">stuff on the left</div>
<div id="right" style="float: right">Tstuff on the right </div>
</div>
What you can do is use JQuery to find the highest div, then set the #left, #right divs with the highest div.
Here's a sample code:
if ($('#left').height()<$('#right').height()) {
$('#left').height($('#right').height());
} else {
$('#right').height($('#left').height());
}
Or you can Google with "equal heights jquery" for other solutions.
Without floats:
<div class=container style='width: 100%;'>
<div class=left-side style='display: inline-block; width: 50%'>
Stuff on the left
</div>
<div class=right-side style='display: inline-block; width: 50%; text-align: right'>
Stuff on the right
</div>
</div>