Skip to main content
D
denisew34658659
Participant
April 6, 2018
Answered

Aligning images

  • April 6, 2018
  • 1 reply
  • 702 views

How do I get my 4 images to line up where the first two are side by side and the second two are side by side under the first two?

Here is my code:

  <div id="Accordion1">

     <h3><a href="#">Portrait Photography</a></h3>

     <div style="display: none">

       <p><figure class="fluid Portrait"><img src="images/portrait.jpg" alt="Portrait of young woman" width="400">  <img src="images/portrait2.jpg" alt="Portrait picture two of young woman">  <img src="images/portrait3.jpg" alt="Portrait of young man with football">  <img src="images/portrait4.jpg" alt="Portrait picture 3 of young woman">

<figcaption>Schedule a portrait photography session in a natural setting</figcaption></figure></p>

        </div>

     <h3><a href="#">Family Photography</a></h3>

     <div>

       <p>Content 2</p>

        </div>

     <h3><a href="#">Newborn Photography</a></h3>

     <div>

       <p>Content 3</p>

        </div>

    </div>

  

  

<script type="text/javascript">

$(function() {

$( "#Accordion1" ).accordion();

});

    </script>

<!-- InstanceEndEditable --></section>

Here is my style sheet code:

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
width: 100%;
border-width: 100%;
columns: 4;
padding-right: 2px;
margin-right: 0px;

}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile:  4;
dw-num-cols-tablet:  8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;

Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design

and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/

.fluid {
clear: both;
margin-left: 0;
width: 11.0497%;
float: left;
display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;       
}

/* Mobile Layout: 480px and below. */
 
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 96.7391%;
padding-left: 1.6304%;
padding-right: 1.6304%;
clear: none;
float: none;
}
#logo {
padding-top: 12px;
padding-bottom: 12px;
font-family: dancing-script;
font-style: normal;
font-weight: 400;
font-size: 45px;
width: 100%;
}
#nav {
width: 66.3%;
margin-top: 5px;
margin-bottom: 5px;
position: static;
margin-right: 0px;

}
#banner {
display: block;
}
#content {
margin-top: 5px;
margin-bottom: 5px;
border-top: medium solid rgba(0,0,0,1.00);
border-bottom: medium solid rgba(0,0,0,1.00);
border-right-style: none;
border-left-style: none;
border-radius: 5px;
width: 100%;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
#footer {
width: 100%;
font-size: x-small;
}
.link {
width: 100%;
margin-left: 1.657%;
clear: both;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
border-radius: 15px;
background-color: rgba(255,166,1,1.00);
text-align: center;
margin-right: 1%;
padding-left: 10%;
padding-right: 10%;
position: static;
height: auto;
display: block;
column-width: 1;
}
.list {
}
#menu {
width: 100%;
}
#footer img {
width: 5%;
}
#content table caption {
font-weight: bold;
font-size: large;
}
tbody tr th {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
tbody tr td {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#content #contact label {
width: 200px;
display: block;
margin-right: 8px;
float: left;
text-align: left;
}
#content p label {
width: 200px;
display: block;
margin-right: 8px;
float: left;
text-align: left;
}
.Portrait {
margin-left: 0;
clear: both;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
width: 98.3695%;
padding-left: 0.8152%;
padding-right: 0.8152%;
clear: none;
float: none;
margin-left: auto;
}
#logo {
width: 100%;
}
#nav {
width: 100%;
position: static;
margin-top: 5px;
margin-bottom: 5px;
}
#banner {
display: none;
width: 100%;

}
#content {
margin-top: 15px;
margin-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
border-radius: 5px;
border-color: #000000;
border-style: solid;
width: 100%;
font-size: x-small;
text-align: left;

}

#footer {
padding-top: 5px;
padding-bottom: 5px;
font-size: x-small;
text-align: center;
width: 100%;
min-height: 5%;
}
.link {
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
color: #FFA601;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
border-radius: 0px;
background-color: rgba(255,255,255,0.01);
clear: none;
margin-right: 1%;
position: static;
height: auto;
display: block;
width: 4.4%;
columns: 1;
font-size: medium;
margin-left: 1.657%;
padding-left: 10px;
border-width: 11.05%;
width: 0%;
}
.list {
}
#menu {
width: 100%;


}
#banner {
display: block;
}

#content p label {
text-align: right;
}
#content #contact label {
text-align: right;
}
.Portrait {
margin-left: 1.6574%;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media screen and (orientation:landscape) and (min-width:769px){

.gridContainer {
width: 89.0217%;
max-width: 1232px;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#logo {
width: 24.1758%;
column-width: 3;
margin-top: 12px;
margin-bottom: 12px;

}
#nav {
width: 66.3%;
position: static;
padding-top: 0px;
columns: 8;
margin-top: 25px;
float: right;
clear: none;
}
#banner {
display: block;

width: 100%}
#content {
width: 100%;
text-align: left;

}
#footer {
width: 100%;
text-align:center;
}
.link {
width: 7.326%;
margin-left: 1.6574%;
display: block;
clear: none;
position: static;
height: auto;
font-weight: bold;
background-color: rgba(255,255,255,0.01);
color: rgba(255,166,1,1.00);
column-width:1;
font-size: small;
border-width: 7.326%;
}
.list {
}
#menu {
width: 100;
columns:4;

}
#menu .fluid.link.zeroMargin_desktop a {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav #menu .fluid.link {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
.Portrait {

clear: both;

margin-left: 0;

}

.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

}

    This topic has been closed for replies.
    Correct answer Nancy OShea

    It appears you're using the legacy Fluid Grid Layouts which were removed from DW CC several versions ago.   

    If you're not too deep into this project yet, I suggest starting over with a better responsive layout system.  Either code manually with CSS Flexbox.  Or use a responsive framework like Bootstrap which gives you much more than just a layout.

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    April 6, 2018

    It appears you're using the legacy Fluid Grid Layouts which were removed from DW CC several versions ago.   

    If you're not too deep into this project yet, I suggest starting over with a better responsive layout system.  Either code manually with CSS Flexbox.  Or use a responsive framework like Bootstrap which gives you much more than just a layout.

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices