I am new to laying out webpages without the use of tables, so my apologies if this is a really simple question.
I am attempting to create a header for a page which I want to look something like this:
-------------------------------------------
| | Some big text |
| img | |
| | Some smaller text |
-------------------------------------------
Currently I have the following div, but it does not bottom align the small text like I want:
<div style="height:50px;">
<img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
<div style="vertical-align:top;">BigText</>
<div style="vertical-align:bottom;">SmallText</div>
</div>
How should I do this?
Thanks!
My version: http://jsfiddle.net/gT6ze/
Alternatively, you can use position:relative for container div, set padding:60px for it, and position image within it with position:absolute; top:0; left:0;. This way div elements with text can also be positioned inside parent by setting position:absolute and top:0 and bottom:0.
use the padding or margin for the small text div
<div style="height:50px;">
<img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
<div style="vertical-align:top;">BigText</>
<div style="vertical-align:bottom;padding-top:15px;">SmallText</div>
</div>
demo
Related
I have a webpage where the contents are centered. It has lot of css and js jinja2 template. When I add a simple div tag
<div class="container">
<!-- something -->
<div>hello</div>
The message is centered too. I tried to change few things but I'm afraid it might it affect some other page too. So I would like to know whether I can force this div tag to get left aligned . I tried 'float=left' is not working. Is possible override all other setting just for this one <div> tag?
The page layout is like
Space |text stats here| Space
|text2 |
And expected result:
Space |text stats here| Space
|text2 |
hello
DEMO:
http://cssdeck.com/labs/wnfmebyb
Code
<title>test</title>
<body class="">
<div class="container">
<h2> Center Header </h2>
centered text
<br/>
<div style="float:left"> Wanted this on left </div>
</div>
<div style="float:left"> Expected output: LEFT </div>
</body>
css file:
.container {
width: 740px;
margin: 40px auto;
text-align: justify;
}
add an id to the particular div so you don't have to override any other settings like this -
<div class="container">
//something
<div id="some_id">hello</div>
than add CSS
#some_id{
text-align: left !important;
}
Looks like I need to provide 'absolute position' something like below seems to work:
<div class="movethis"> Wanted this on left </div>
.movethis{
position:absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Result : http://cssdeck.com/labs/4rtflvmy
I am trying to setup a div with bootstrap.
My problem is that I need to have a set margin on the left and right of the div. By using col-md-10 doesn't get me the margin I need. It's more than 10px if the screen is wide.
For example:
<div class="col-md-offset-1 col-md-10">
//contents...
</div>
-------------------------------------
| --------- div --------------
|10px margin 10px margin
| | |
| | |
| -------------------------------
-------------------------------------
Does anyone have an idea of how to fix it? Thanks a lot!
If I understand you want always a margin value of 10px at each side. You can create a custom class and use calc(), try this:
<div class="col-md-offset-1 col-md-10 margin">
//contents...
</div>
.margin {
margin:0 10px;
width:calc(100% - 20px);
}
Check this BootplyDemo
Another Option could be a custom class on the container and use padding. Try:
<div class="container margin">
<div class="col-xs-12">
//contents...
</div>
</div>
.margin {
width:100%;
padding:0 10px;
}
Another BootplyDemo
You should be using the container-fluid class on your main content div.
<div class="container-fluid">
<!-- Contents -->
</div>
What this does is creates a full-width container with a bit of padding on the right and left, top and bottom that responsively resizes based on the width of your browser.
Hope this helps!
I have a website that uses a sidebar on the right. That sidebar is using "float:right" as its CSS style.
I like to add content to the main that has text floating around images, as explanations. For those images, I use "float:right" as well, and it works as expected.
The challenge starts when I add several sections of text with images under each other, like this:
1st text +-----+
text text | img |
+-----+
2nd text +-----+
text text | img |
+-----+
By default, the 2nd paragraph would start right after the 1st one's end, like this:
1st text +-----+
text text | img |
2nd text +-----+
text text
+-----+
| img |
+-----+
I learned that I should use the style clear:right between the paragraphs to keep them separated, and that works as described.
Here's the code I'd use for each of the img+text blocks:
<div>
<img style="float:right" src="animg.png" width="502" height="241" alt="bla bla">
<p>Text for the image.</p>
<div style="clear:right"></div>
</div>
However, now the sidebar starts making trouble: If the sidebar is going down further than where the clear:right appears on the left side, then there will be a gap in the content, going as far as the sidebar goes. You can see the effect here: website example with sidebar influencing clear:right
Any suggestions how to deal with that, i.e. avoid that the clear:right doesn't get affected by the sidebar's height but only by the local text+image block?
One suggestion I found so far would be to avoid using float for the sidebar, but use a table instead. But that leads to new complications (e.g. the sidebar would end up on the left unless I change the order of my html content, which would then probably lead to new issues with smaller screens and whatnot).
Your content area and your sidebar need to be in separate div tags:
<body>
<div>Header</div>
<div>Content</div>
<div>Sidebar</div>
</body>
Float the content left, and the sidebar right. You can then add as many elements inside each of those sections as you need. As long as the HTML is well-formed (i.e. not missing closing tags when needed) and they all stay within the width of their parent, they won't have a problem.
EDIT:
With a static sidebar and a fluid (elastic) main area, it gets a little more complex. First of all, remove the right-hand margin from #main, and add:
overflow-y: hidden;
Then, change the margin-right on your boxes div to:
margin: 0 2em;
That should sort the problem for you.
Enjoy the code.
HTML:
<div class="main">
<div class="box-one">Your content here</div>
<div class="box-two">Put photo here</div>
<div class="clear"></div>
CSS:
.clear{
clear:both;
}
.main{
width:100%;
background:#424242;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
}
.box-one{
width:260px;
background:#FFF;
float:left;
}
.box-two{
width:100px;
background:#FFF;
float:right;
}
I'm having trouble creating a layout that looks like a row in a table, I need it to look like:
--------- ---------------------------
| | Line of text |
| | Line of text |
| | |
--------- ---------------------------
so I'm trying something like:
<div>
<img src="" />
<div float=left>Line of text</div>
<div float=left>Line of text</div>
</div>
it's not coming out right, it looks like the lines of text don't take up the full height, as high as the bottom of the img. I want to solid-color the entire row, how can I do this?
Thanks
I agree with Scobal's comment....if what you are trying to display is tabular data, then it would semantically be correct to display it in a table.
If not, you could theoretically set the div's img float property to left, and then wrap both of your text divs in an outer div and float that one as well.
looks like a comment with an avatar or user data with avatar if I'm not mistaken.
<div class="user">
<img class="avatar">
<div class="user-info">
<p>line of text</p>
<p>line of text</p>
</div>
</div>
css:
.avatar {
width: <width here>.px;
float: left;
background: #ccc;
}
.user-info {
float: left;
}
Of course remember to clear your floats.
You can also substitute lists for the divs if you want it more semantic :P
If I have a div layout like this:
<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>
Which makes something like this:
-----------------------------------------------------
| stretchyheader |
-----------------------------------------------------
| | |
| | |
| fixedwidthwide | fixednarrow |
| | |
| | |
| | --------------
| |
| |
| | patterned
| | background
-----------------------
- footer -
How do I ensure that both columns are the same height as the deepest column? The column heights are flexible according to the amount of content and have a white background.
A very simple, common way to do this is using Faux Columns.
You would have a structure that looked something like this:
<div id="stretchyheader"></div>
<div id="container">
<div id="fixedwidthwide"></div>
<div id="fixednarrow></div>
</div>
<div id="footer"></div>
And you actually apply a background image to #container to add any background colors, borders, etc. to each of the 2 columns.
There are CSS techniques to do this without faking it, but they are much more complex:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
http://www.socialgeek.be/blog/read/flexible-equal-height-columns
Adapted from here:
Create a container around the two fixed columns, and have css something like this:
#container {
float:left;
width:[sum of the two columns width];
}
#fixedwidthwide {
float:left;
width:[whatever];
}
#fixednarrow {
float:left;
width:[whatever];
}
Note that this is only necessary if the columns need to be of equal height for some reason. If not, you can just follow philfreo's suggestion and use faux columns.
There are a number of solutions for this problem, including OneTrueLayout Technique, Faux Columns Technique and CSS Tabular Display Technique.
The best solution for equally height-ed columns is the CSS Tabular Display Technique that means to use the display:table feature.
It works for Firefox 2+, Safari 3+, Opera 9+ and IE8.
The code for the CSS Tabular Display:
The HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
The CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Even if there is a problem with the auto-expanding of the width of the table-cell it can be resolved easy by inserting another div withing the table-cell and giving it a fixed width. Anyway, the over-expanding of the width happens in the case of using extremely long words (which I doubt anyone would use a, let's say, 600px long word) or some div's who's width is greater than the table-cell's width.
The Faux Column Technique could be a solution to this problem, but it has some drawbacks such as, you have to resize the background tiled image if you want to resize the columns and it is also not an elegant solution.
The OneTrueLayout Technique consists of creating a padding-bottom of an extreme big height and cut it out by bringing the real border position to the "normal logical position" by applying a negative margin-bottom of the same huge value and hiding the extent created by the padding with overflow:hidden applied to the content wraper. A simplified example would be:
The HTML file:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
In my opinion the unimplemented 100% height within an automated height container is a major drawback and the W3C should consider revising this attribute.
Other resources: link1, link2, link3, link4, link5 (important)