I have 4 div tags each one is a day ex. monday , tuesday , wednesday, thursday, etc.. I have the 4 aligned by float left each 200px wide. Now I have 3 div tags each one is a day also friday saturday sunday, and I want to center this underneath the 4 that are above.
<div id= "top-four-days">
<br />
<div class= "monday">
<h2>Monday</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
<h2>Evening</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
</div>
<div class= "tuesday">
<h2>Tuesday</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
<h2>Evening</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
</div>
<div class= "wednesday">
<h2>Wednesday</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
<h2>Evening</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
</div>
<div class= "thursday">
<h2>Thursday</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
<h2>Evening</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
</div>
</div>
<div id= "bottome-three-days">
<br />
<div class= "friday">
<h2>Friday</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
<h2>Evening</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
</div>
<div class= "saturday">
<h2>Saturday</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
<h2>Evening</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
</div>
<div class= "sunday">
<h2>Sunday</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
<h2>Evening</h2>
<br />
<h3>Date:</h3>
<h3>Time:</h3>
<h3>Location:</h3>
</div>
</div>
style
#top-four-days {
width: 800px;
}
#bottom-three-days {
width: 800px;
background-color: #999;
}
.monday {
width: 200px;
height: 300px;
background-color: purple;
float: left;
}
.tuesday {
width: 200px;
height: 300px;
background-color: #F00;
float: left;
}
.wednesday {
width: 200px;
height: 300px;
background-color: blue;
float: left;
}
.thursday {
width: 200px;
height: 300px;
background-color: yellow;
float: left;
}
.friday {
width: 200px;
height: 300px;
background-color: yellow;
float: left;
}
.saturday {
width: 200px;
height: 300px;
background-color: yellow;
float: left;
}
.sunday {
width: 200px;
height: 300px;
background-color: yellow;
float: left;
}
Are you trying to achieve something like this? You can use inline-block together with text-align:center; in order to centering them.
Related
How can we set height of green box equal to the height of red box with scroll in green box. Please note that we cannot set height of red box, it is dynamic and may be changed as content changes.
https://jsfiddle.net/guqfz069/13/
.container{
display: flex;
height: 100%;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
with position and absolute for .right you can do that
.container{
display: flex;
height: 100%;
position: relative;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
position: absolute;
right: 0;
height: 100%;
overflow-y: auto;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
You can do this:
.container {
display: flex;
width: 100%;
}
.container>* {
flex: 1;
}
.left {
background-color: #f00;
width: 60%;
}
.right {
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
DEMO HERE: https://jsfiddle.net/ayL75j4h/
I would use CSS Grid to achieve this effect.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 100%;
}
This will make a grid with two columns, one for .left, one for .right with the same width & height; The fr (fractional unit) makes sure of that.
Let me know if this helps you
If you add align-items: flex-start and maybe add height: 100%; to child elements?
Use-->> max-height:130px; overflow:auto; -->> in both class left and right,
like this
.left{
background-color: #f00;
width: 60%;
height: 100%;
max-height:130px;
overflow:auto
}
.right{
background-color: #0f0;
width: 40%;
max-height:130px;
overflow:auto
}
and u will get this
Hope this helped you
Add height:auto to .left
.left{
background-color: #f00;
width: 60%;
height: auto;
}
UPDATE
Based on #Riz's comment
I believe we'll need some js to achieve this
const leftHeight = document.querySelector('.left').offsetHeight;
document.querySelector('.right').style.height = `${leftHeight}px`;
since offsetHeight includes margin and padding, it'll be better if box-sizing: border-box is set
I’m trying to stack the #Direction Div on top of the two other Divs #Ratedpics and #Mainpics. I want them to be centered on each other. Also when the page resizes I want them to move proportionally with the page. Is this possible?
Rated pics and Main pics need to be side by side. Directions need to be centered on top.
div#MainPics
{
height: 650px;
width: 60%;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
margin-left: auto;
margin-right: auto;
}
#ratedpic
{
position: relative;
float: left;
width: 22%;
}
div#Direction
{
width: 20%;
margin-left: auto;
margin-right: auto;
}
<div id="Direction">
<asp:Label ID="Label1" runat="server" Text="Here i want my directions centered on top of main pics" Font-Size="Large"
Width="270" Font-Bold="True" ForeColor="#1B0358"></asp:Label>
</div>
<div id="ratedpic">
<p>
<asp:Label ID="RatedPicnameLabel" runat="server" Text=""></asp:Label>
</p>
<asp:ImageButton ID="RatedImage" Width="70%" runat="server" /><br />
<asp:Label ID="RatedPicRating" runat="server" Text=""></asp:Label><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label>
</p>
<asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" />
</div>
<div id="LeftPic">
<p>
<asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" Font-Bold="True"></asp:Label>
</p>
<asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" />
</div>
</div>
HTml Output
<div id="Direction">
<span id="MainContent_Label1" style="display:inline-block;color:#1B0358;font-size:Large;font-weight:bold;width:270px;">Chose the photo you like better.</span>
</div>
<div id="ratedpic">
<p>
<span id="MainContent_RatedPicnameLabel">Margaret</span>
</p>
<input type="image" name="ctl00$MainContent$RatedImage" id="MainContent_RatedImage" src="Pictures/6f455ca0-27a0-49c3-ab61-e3f19e2e8258.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$RatedImage", "", false, "", "Member.aspx?UserID=9", false, false))" style="width:70%;" /><br />
<span id="MainContent_RatedPicRating">Banged: 52%</span><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<span id="MainContent_FirstPicMemberNameLabel" style="color:White;font-weight:bold;">Jessica-Jean</span>
</p>
<input type="image" name="ctl00$MainContent$FirstPicLink" id="MainContent_FirstPicLink" src="Pictures/2b5c7b66-00c4-4948-aa2b-7abef2f556f3.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$FirstPicLink", "", false, "", "default.aspx?yesId=7&noId=7", false, false))" style="width:90%;" />
</div>
<div id="LeftPic">
<p>
<span id="MainContent_SecondPicMemberNameLabel" style="color:White;font-weight:bold;">Amy</span>
</p>
<input type="image" name="ctl00$MainContent$SecondPicLink" id="MainContent_SecondPicLink" src="Pictures/ce698138-1dfc-46f8-aab7-fd7a1d5c5f0b.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$SecondPicLink", "", false, "", "default.aspx?yesId=12&noId=7", false, false))" style="width:90%;" />
</div>
</div>
If I understand your question correctly, you'll need an extra wrapper around ratedpic and mainpic: http://jsfiddle.net/rgq4d/
I would also strongly recommend to make your CSS ID's all lowercase, in order to prevent typos.
I'm trying to align 2 sets of buttons to the panel in the div above. The buttons called but1, but2 for the left panel. The others are but1, but2, but3 right panel. At the moment the buttons are in a straight line under the 2 panels. So I would like the 2 left buttons right under the left panel aligned left. The 2 right buttons right under the right panel align left?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.input
{
clear: left;
margin: 0 0 0.2em;
padding: 6pt 1em;
}
.flclass
{
float: left;
}
.imageDetails
{
color: Gray;
line-height: 1.2;
margin: 34px 0 0 10px;
}
input.special
{
background: none repeat scroll 0 0 #913297;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="input">
<label>
panel 1</label>
<asp:Panel CssClass="flclass" ID="pnlcustomerImage" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center; padding: 0"
Width="200px" Height="70px">
<asp:Literal ID="lt1" runat="server" Text="Panel left" />
<asp:HyperLink ID="hl1" runat="server" Target="_blank">
<asp:Image ID="im1" runat="server" Visible="false" Width="200px" Height="70px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<div class="flclass">
<p class="imageDetails">
<asp:Literal ID="lt4" Text="what to write here?" runat="server" />
</p>
</div>
<label>
small image</label>
<asp:Panel CssClass="flclass" ID="pnlAgentSmallLogo" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
Height="42px">
<asp:Literal ID="lt2" runat="server" Text="Panel right" />
<asp:HyperLink ID="hl2" runat="server" Target="_blank">
<asp:Image ID="im2" runat="server" Visible="false" Width="120px" Height="42px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<p class="imageDetails" style="margin-top: 5px">
<asp:Literal ID="lt3" Text="what to write here?" runat="server" /></p>
<div class="input" style="margin: top">
<label>
</label>
<asp:Button ID="btn1" runat="server" Text="but1 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" />
<asp:Button ID="btn2" runat="server" Text="but2 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" />
<asp:Button ID="btn4" runat="server" Text="but2 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn15" runat="server" Text="but3 right" CssClass="special"
Style="margin-top: 26px; margin-left: 10px" Visible="true" />
</div>
</div>
</form>
</body>
</html>
Change ur code
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />
set margin-left: 150px in btn3
For future viewers, I found that this works better:
<asp:Button ID="btn3" runat="server" Text="but1 right"
CssClass="special" Style="margin-left:auto; display:block;" />
That way, if you change the width of your button, you don't have to do math to figure out the margin size.
<div id="nav-main" align="center" style="width: 95%; height: 35px;">
<div style="float:left; height: 29px; width: 260px;">
<a href="javascript:void(0);" onclick="select();"
style="font-size: small; background-color: #FFFFFF">
Изменить код и примечание</a>
</div>
<div style="float:right; width: 639px;" align="center">
<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" Width="521px" MaximumDynamicDisplayLevels="0"
StaticSelectedStyle-CssClass="StaticSelectedStyle" Height="32px" StaticSubMenuIndent="18px"
OnMenuItemClick="Menu2_MenuItemClick">
<StaticSelectedStyle CssClass="StaticSelectedStyle"></StaticSelectedStyle>
<Items>
<asp:MenuItem Text="Часовые" Value="1" />
<asp:MenuItem Text="Суточные" Value="2"
Selected="True" />
</Items>
</asp:Menu>
</div>
</div>
Can't see the left div.
and firebug shows it under right div :(
How to self left div to the left side and sure what I'm doing wrong ?
Not sure I totally get what you're trying to do, but as far as getting 2 divs to float next to each other, which I think is what you're asking, try the following. I changed the container from 95% width to fixed width to allow for the fixed size you defined for your divs. And I changed the second div to float:left as well. Even if you want one div to float to the right of the left one, doesn't mean you need to use float:right. If they are both styled with float:left and their defined widths fit within their containing element, the second will float to the right of the first. Hope that helps.
<div id="nav-main" align="center" style="min-width: 900px; width:95%; height: 35px;">
<div style="float:left; height: 29px; width: 260px;">
<a href="javascript:void(0);" onclick="select();"
style="font-size: small; background-color: #FFFFFF">
Изменить код и примечание</a>
</div>
<div style="float:left; width: 639px;" align="center">
<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" Width="521px" MaximumDynamicDisplayLevels="0"
StaticSelectedStyle-CssClass="StaticSelectedStyle" Height="32px" StaticSubMenuIndent="18px"
OnMenuItemClick="Menu2_MenuItemClick">
<StaticSelectedStyle CssClass="StaticSelectedStyle"></StaticSelectedStyle>
<Items>
<asp:MenuItem Text="Часовые" Value="1" />
<asp:MenuItem Text="Суточные" Value="2"
Selected="True" />
</Items>
</asp:Menu>
</div>
</div>
Is this the sort of ting your looking for?
<div id="nav-main" style=" width: 100%; min-width: 900px; border:1px solid green;">
<div style="min-width:258px; min-width:30%; float: left; background-color:#CCC;"> <a href="javascript:void(0);" onclick="select();"
style="font-size: small;"> Изменить код и примечание</a></div>
<div style="float: left; background-color:#FFFFCC; width:70%;">
<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" Width="521px" MaximumDynamicDisplayLevels="0"
StaticSelectedStyle-CssClass="StaticSelectedStyle" Height="32px" StaticSubMenuIndent="18px"
OnMenuItemClick="Menu2_MenuItemClick">
<StaticSelectedStyle CssClass="StaticSelectedStyle"></StaticSelectedStyle>
<Items>
<asp:MenuItem Text="Часовые" Value="1" />
<asp:MenuItem Text="Суточные" Value="2"
Selected="True" />
</Items>
</asp:Menu>
right</div>
<div style="clear:both;"></div>
</div>
I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.
i need help in aligning the controls. and want to look like this:
DropdownListControl -- > selected_div -- > button
below is my soucr code....
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
<div id="divDateRangeSearch">
<div style="float: left">
<asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label>
<br />
<uc1:DatePicker ID="FromDate" runat="server" />
<uc1:DatePicker ID="ToDate" runat="server" />
</div>
</div>
<div id="divSearchSubject" >
<div style="float: left">
<asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br />
<asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox>
</div>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<br />
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
UPDATE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#main {
width: 800px;
}
#select {
float: left;
width: 250px;
border: 1px solid blue ;
}
#holder {
position: relative;
width: 300px;
float: left;
margin-left: 20px;
border: 1px solid red ;
}
#div_date, #div_subject, #div_status {
position: absolute;
top: 0;
left: 0;
}
#button {
float: left;
margin-left:20px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('#filterResultsBy').change(function () {
var sel = $(this).val();
$('#div_date').hide();
$('#div_subject').hide();
$('#div_status').hide();
if (sel === 'Date') {
$('#div_date').show();
}
else if (sel == 'Subject') {
$('#div_subject').show();
}
else if (sel == 'Status') {
$('#div_status').show();
}
});
});
</script>
<div id="main">
<div id="select">
Filter Results by:
<select id="filterResultsBy">
<option value="">Select...</option>
<option value="Date">Date</option>
<option value="Subject">Subject</option>
<option value="Status">Status</option>
</select>
</div>
<div id="holder">
<div id="div_date" style="width: 250px; display: none;" >
Date Range:
<asp:textbox width="50px" id="startdate" runat="server" /> - to - <asp:textbox width="50px" id="enddate" runat="server" />
</div>
<div id="div_subject" style="display: none;" >
Subject:
<asp:TextBox ID="txtSubject" runat="server" Width="225px" ></asp:TextBox>
</div>
<div id="div_status" style="display: none;" >
Status:
<asp:DropDownList ID="ddlStatus" runat="server" Width="152px">
</asp:DropDownList>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>
</form>
</body>
</html>
Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:
select {
float: left;
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
float: left;
margin-left: 20px; /* put some space between the elements */
}
The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:
#divHolder {
position: relative;
float: left;
width: 200px; /* adjust as needed */
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
position: absolute;
top: 0;
left: 0;
}
And the HTML:
<div id="divHolder">
<!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<div style="float:left">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
<div style="float:left">
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>