I am useless at CSS and I am trying to create a two column equal width effect. The only issue is that I have some existing html that has to sit in the left hand box and will need to add elements to the right hand box.
This is the source that will be in the left hand side (I have included the CSS inline):
<div id="photoContainer" style="position:relative; width:400px; height: 400px;background:#845454;margin-left:20px;overflow: hidden;" >
<img id="imgPhoto" style="z-index:1000; position:absolute; left:60px; top:23px; width:280px; height:354px" alt="photo" src="images/model.png" class="resize" />
<img id="imgFrame" style="z-index:1005; position:absolute; left:0px; top:0px; width:400px; height:400px" alt="frame" src="images/wigs/Wig1.png" />
</div>
Try as I might, I can not get the CSS right to display the above in the left hand side and further controls in the right hand side.
Hopefully you can help me.
Thanks
not very clear what you have to do but in general:
<div id="container">
<div id="column1">...</div>
<div id="column2">...</div>
</div>
CSS:
#container {
float: left;
width: 100%;
}
#column1, #column2 {
width: 50%;
float: left;
}
Related
I am creating a sample website which has three divisions horizontally.
I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype
Here's a better way to format your document:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Here's a jsFiddle for good measure.
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}
<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>
Just had to add display:flex to the container! No floats required.
You can use floating elements like so:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Note the overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future
It's not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Here in your question
I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.
I want to point few things here
Do not use inline css ( it is very bad practise )
Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.
Codepen link for my answer
https://codepen.io/feizel/pen/JELGyB
.wrapper {
width: 100%;
}
.box {
float: left;
height: 100px;
}
.box:nth-child(1) {
width: 25%;
background-color: red;
}
.box:nth-child(2) {
width: 50%;
background-color: green;
}
.box:nth-child(3) {
width: 25%;
background-color: yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
You add a
float: left;
to the style of the 3 elements and make sure the parent container has
overflow: hidden; position: relative;
this makes sure the floats take up actual space.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.
Get rid of the position:relative; and replace it with float:left; and float:right;.
Example in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
Morning all,
I'm having an alignment issue.
I am using a MYSQL array to create a sports profile page.
I want it to display the image, then to the right, show their name, position and number below each other.
Then i want it to dynamically display 3 or 4 of these next to each other before swapping down to the next line.
I have managed to get it to work with just the pictures, not with the text in between. they all just show on new lines currently.
<style>
#container .profile{
display: inline-block;
vertical-align:top;
}
</style>
<div class="profile">
<img src="wp-content/uploads/profile/jh7.jpg" alt="" /><br />
<h3 class="widget-title">Player 1</h3>
<p>Defence</br>#7</br></br>
<img src="wp-content/uploads/profile/dw21.jpg" alt="" /><br />
<h3 class="widget-title">Player 2</h3>
<p>Defence</br>#21</br></br>
<img src="wp-content/uploads/profile/pn22.jpg" alt="" /><br />
<h3 class="widget-title">Player 3</h3>
<p>Defence</br>#22</br></br>
</div>
</div><!-- .entry-content -->
</div>
Thanks guys
You can use float left for the image:
<style>
.profile img{
float: left;
margin-right: 5px;
}
</style>
Checkout this DEMO: http://jsbin.com/jigotamamu/1/
Quick example : float the images and clear the float with a block element having a clear: both property :
http://jsfiddle.net/L8jtwkw1/2/
You can wrap each profile in a container and use inline block to list them horizontally then.
It still didn't do exactly what I was after, However I managed to sort it by putting a column in:
<style>
.profile img{
float: left;
margin-right: 10px;
margin-top: 2px; }
.profile h3 { display: inline-block; }
.profile pos{ }
.column-left{ float: left; width: 33%; }
</style>
I think that thie problem is in <h3> tag - you need either replace it with <span> or override styles for it.
For example:
echo '<img src="wp-content/uploads/profile/'.$row['Id'].'.jpg" alt="" />',
'<span class="widget-title">'.$row['FirstName'].' '.$row['Surname'].'</span>',
$row['PositionLong'].'</br>',
'#'.$row['Number'].'</br>';
If you show the css styles for widget-title, we can help you.
I am completely blocked on this problem, I am working with a CMS, and I am generating the articles, and I want them to be in two colums, so
here is the html code ( I deleted a bit of the php parts not to confuse you ):
<div id="contenu_col">
<?php
echo '<div class="col1">
<img src="square/'.$IMGACSQ.'" ><br/>
<p>'.aff($DATE).'<br/>'.aff($nom_projet).' - '.aff($ARTISTE).'</p></div>';
</div>
that generate an html code that look like that :
<div class="col1">
<a href="exhibition.php?ID=109">
<img src="square/E_3094_x.jpg" >
</a><br/>
<p>11.12. - 29.01.11.<br/>New impressions - New works - new artists - new space 5 and a happy new year)</p>
</div>
<div class="col1">
<a href="exhibition.php?ID=108">
<img src="square/BG_IoanGrosu06_x.jpg" >
</a><br/>
<p>30.10. - 04.12.10.<br/>Come here tomorrow - Ioan Grosu</p></div>
and the css :
.col1{
width:300px;
float:left;
padding: 3%;
display: block;
}
.col1 img{
width:100%;
}
.col1:after{
clear: both;
}
#contenu_col {
width:850px;
top:150px;
z-index:50;
left:460px;
position:absolute;
padding-bottom: 20px;
}
#contenu_col img{
width:100%;
}
( because I can't post images...)
It works 70% of the website; then sometimes some weird gap appears....
I don't understand what I'm doing wrong :(
RESOLVED.THANK YOU!!
Edit your col1 class and add a height,for example height:300px;
.col1 {
width: 300px;
float: left;
padding: 3%;
display: block;
height: 300px;
}
Also your DIV#encar isn't well styled.
it appears because .col1 height is not unified, try to add this to your css
.col1{
height: some value
}
i am new to css .. i can easily fetch the suggestions from the back end to the suggestion div.
Height of suggestion div is set to height:auto as it is adjusted automatically depending on the suggestion as shown
<div class="suggestBox">
<div class="suggestionsBox" style="margin-left:16px">
<div class="suggestions bordered" style="height: auto; max-height: none; width:100%; overflow: hidden; padding: 0px; ">
<div class="jspContainer" style="width: 100%; height: 0px; ">
<div class="jspPane" style="padding: 0px; top: 0px; width: 100%; ">
<div class="items_block"></div>
<div class="users_block"></div>
</div>
</div>
</div>
</div>
but as it's height is altered i.e grown .. the elements under the suggestion box or div are scattered or something like that ... do i have to change something in CSS ..
//THANX
For maintaining depth of layers in CSS there is z-index property.
Try giving it position:absolute; to remove it from the document layout.
See this tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/
The image below explains what I am trying to achieve.
I need to show a user's car picture with the name under it. Each image/name pair should be in a DIV so as a user adds more cars, they move to the next line or page. Ideally the DIVs should be centered, more as a matter of aesthetics.
Using DOMPDF, I am generating a PDF from an HTML layout.
Unfortunately, DOMPDF's support for float is bad, even in the new 0.6.2 beta. I wonder if this layout I am proposing could be done without float. DOMPDF also does not support unordered lists.
I have tried some solutions using tables, but this also isn't good since DOMPDF does not allow cells to spill over to the next page.
I am using PHP 5/ codeigniter, and DOMPDF 0.5.2 (stable).
Any suggestions on how to get this layout are greatly appreciated!
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img {width: 150px; height: 150px;}
h1 {font-size: 3em; text-align: center;}
h2 {text-transform: uppercase; width: 150px; text-align: center;}
div {margin: 10px; width: 150px;}
</style>
</head>
<h1>My Cars</h1>
<?php foreach ($cars as $row): ?>
<div>
<img src="<?php echo $row->cars_picture; ?>" />
<h2><?php echo $row->cars_name; ?></h2>
</div>
<?php endforeach; ?>
</html>
Thanks to #rkw and #manyxcxi for helping out.
At the end the only way of doing this without hacks was to use mpdf instead of DOMPDF.
I have the impression mpdf is a much better library, with better documentation. It has partial support for float, but it works very nicely and does exactly what I needed above.
If the boxes are all fixed width and you know the width of your PDF, then you can calculate the boxes per row and use a spacer div on the left of the bottom row to give you the offset you're looking for.
Without using float, you would have to use instead of : http://jsfiddle.net/AxZam/40/
relevant css:
body {
width:800px;
}
#content {
margin: 0px auto;
width: 600px;
text-align: center;
}
img {
width: 150px;
height: 150px;
}
h1 {
font-size: 3em;
}
.cars {
text-transform: uppercase;
width:150px;
display:block;
position:absolute;
top:0px; left:0px; }
span {
margin: 10px;
position: relative;
}
relevant html section:
<div id='content'>
<h1>My Cars</h1>
<span>
<img />
<span class='cars'>car</span>
</span>
...
</div>